/* ==========================
   GENERAL LAYOUT & COLORS
========================== */
body {
    padding-top: 60px;
    background: #f9f9f9;
    color: #444;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
a {
    color: #55A72F;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color: #FF0000;
}*/

/* ==========================
   FORM AND INPUT STYLES
========================== */
.cabezote,
select.cabezote,
input.cabezote {
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #0B458F;
    background-color: #FFFFFF;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.DC {
    font-size: 9px;
    color: #555;
}

/* ==========================
   HEADERS / ZONE / INFO
========================== */
.cabezoteprincipal {
    font-size: 10px;
    background-color: #E3E9F1;
    color: #0066FF;
    padding: 5px 8px;
}

.cabezoteprincipal--rojo,
.cabezoteprincipalRojo {
    background-color: #FFFCDF;
    color: #D00;
}

.cabezoteprincipal--grande,
.cabezoteprincipalRojoGrandeUno {
    font-size: 12px;
}

.cabezoteprincipal--rojo-grande,
.cabezoteprincipalRojoGrande {
    background-color: #FFFCDF;
    color: #D00;
    font-size: 12px;
}

.zona-info {
    background-color: #d9edf7;
    color: #31708f;
    padding: 10px 15px;
    border: 1px solid #bce8f1;
    border-radius: 4px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.path-info {
    font-size: 12px;
    color: #444;
    background-color: #f5f5f5;
    padding: 6px 10px;
    border-left: 3px solid #0B458F;
    margin-bottom: 10px;
}

/* ==========================
   ALERTS
========================== */
.alert {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}


.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
}

.vencido {
    background-color: #f8d7da;
    color: #721c24;
}
.vencido .btn {
    display: none;
}

/* ==========================
   TABLES
========================== */
table thead {
    background-color: #000;
    color: #fff;
}

tbody tr.even {
    background-color: #E3E9F1;
}

tbody tr.odd {
    background-color: #EFEFEF;
}

tbody tr:hover {
    background-color: #D3D3D3;
}

.table-header {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.even-row {
    background-color: #f2f2f2;
}

.odd-row {
    background-color: #ffffff;
}

/* ==========================
   PAGINATION
========================== */
.pagination .active .page-link {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination .page-link {
    color: #007bff;
}

.pagination .page-link:hover {
    background-color: #e9ecef;
}

/* ==========================
   BUTTONS / SEARCH
========================== */
.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.search-button:hover {
    background-color: #0056b3;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.search-button:focus {
    outline: none;
    box-shadow: 0px 0px 8px rgba(0, 123, 255, 0.8);
}

.search-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    box-shadow: none;
}

.search-button .icon {
    margin-right: 8px;
    font-size: 18px;
}

/* ==========================
   CONTENT CLASSES
========================== */
.contenido {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #333333;
}


.contenidoUno {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000;
}

.contenidoVerde {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #360;
    background-color: #FFF;
}

.contenidoRojo {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #F00;
    background-color: #FFF;
}

.contenidoPeque {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;
	color: #333333;
}

.contenidoRojoGrande {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #F00;
    background-color: #FFF;
}

.formulario-alineado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    margin: auto;
}

.formulario-alineado select,
.formulario-alineado input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.botonera {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.botonera .btn-info {
    min-width: 90px;
    padding: 8px 12px;
    font-size: 14px;
}


.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.contenedor-campos {
	width: 260px;               /* Ancho fijo */
	margin: 0 auto;             /* Centrado */
	display: flex;
	flex-direction: column;
	gap: 10px;                  /* Espaciado entre campos */
}

.contenedor-campos select,
.contenedor-campos input[type="text"],
.contenedor-campos input[type="password"] {
	width: 100%;
	padding: 6px 10px;
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}


.version-text {
    text-align: center;
    margin-top: 10px;
    font-size: 8px;
    color: #555;
    font-weight: bold;
}


  /* ancho de la 1a columna (Acciones) */
  .table-crm th.col-acciones,
  .table-crm td.col-acciones {
    width: 14%;            /* súbelo a 16–18% si aún los ves pegados */
    min-width: 140px;      /* evita que se colapse en pantallas chicas */
    white-space: nowrap;   /* que no haga salto de línea */
  }

  /* mantén espacio entre botones */
  .crm-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;            /* separa los iconos */
  }
  .crm-actions .btn { padding: .25rem .4rem; line-height: 1; }