/* =============================================
   estilos.css — Clinica Veterinaria
   Versión completa con todas las funcionalidades
============================================= */

/* ── 1. Reset ─────────────────────────────── */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: #f4f3f0;
    color: #181816;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    min-height: 100vh;
}


/* ── 2. Menu lateral ──────────────────────── */

.menu-lateral {
    width: 220px;
    background: #49b1b9 !important;
    border-right: 1px solid #49b1b9;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 50;
    color: #f4f3f0;
    /* Texto en gris claro */
}

.menu-logo {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    letter-spacing: -.3px;
    padding: 20px 20px 16px;
    display: flex;
    border-bottom: 1px solid #e3e1db;
    color: #273f5c;
    flex-shrink: 0;
    background-color: white;
}

.menu-logo span {
    color: #49b1b9;
}

.logo-img {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    flex-shrink: 0;
}

.menu-selector-rol {
    padding: 14px 16px;
    border-bottom: 1px solid #e3e1db;
    flex-shrink: 0;
}

.menu-selector-etiqueta {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #70706a;
    margin-bottom: 6px;
}

#selectorRol {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e3e1db;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    background: #f4f3f0;
    color: #181816;
    cursor: pointer;
}

.menu-nav {
    flex: 1;
    padding: 10px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.menu-enlace {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-size: 13.5px;
    transition: background .12s, color .12s;
}

.menu-enlace:hover {
    background: rgba(73, 177, 185, 0.1);
    color: #273f5c !important;
}

.menu-enlace.activo {
    background: #eff4ff;
    color: #49b1b9;
    font-weight: 500;
    /* hace que sea más elegante, le da aire por los lados */
    border-radius: 8px;
    margin: 0 10px;
}

.menu-pie {
    padding: 14px 16px;
    border-top: 1px solid #e3e1db;
    flex-shrink: 0;
    background-color: #ffffff;
}

.usuario-activo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usuario-iniciales {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #273f5c !important;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600 bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .5px;
}

.usuario-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.usuario-nombre {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #273f5c;
}

.usuario-rol {
    font-size: 11px;
    color: #8c979f;
}


/* ── 3. Contenedor principal ──────────────── */

.contenedor-principal {
    margin-left: 220px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contenido {
    padding: 28px 28px 40px;
    flex: 1;
}


/* ── 4. Cabecera de página ───────────────── */

.cabecera-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 25px;
    gap: 1px;
    margin-bottom: 20px;
    background-color: #273f5c;
    height: 60px;
    border-radius: 8px;
}

.titulo-pagina {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.4px;
    line-height: 1.2;
    color: #ffffff;
    /* añadido */
    margin-left: 10px;
    margin-top: 5px;
}

.subtitulo-pagina {
    font-size: 13px;
    color: #49b1b9;
    margin-top: 3px;
    /* añadido */
    margin-left: 10px;
}

.leyenda {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 4px;
    margin-top: 15px;
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    /* añadido */
    color: white;
    margin-right: 15px;
}

.leyenda-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ── 5. Tarjetas ──────────────────────────── */

.tarjeta {
    background: #ffffff;
    border: 1px solid #e3e1db;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);
}

.tarjeta-cuerpo {
    padding: 20px;
}


/* ── 6. Avisos y etiquetas ────────────────── */

.aviso {
    background: #eff4ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #49b1b9;
    margin-bottom: 16px;
    display: none;
}

.aviso.visible {
    display: block;
}

.etiqueta {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

.etiqueta-confirmada {
    background: #eff4ff;
    color: #1d4ed8;
}

.etiqueta-pendiente {
    background: #fffbeb;
    color: #92400e;
}

.etiqueta-completada {
    background: #f3f4f6;
    color: #4b5563;
}

.etiqueta-cancelada {
    background: #fee2e2;
    color: #991b1b;
}

.etiqueta-admin {
    background: #f5f3ff;
    color: #6d28d9;
}

.etiqueta-veterinario {
    background: #ecfdf5;
    color: #065f46;
}

.etiqueta-recepcionista {
    background: #fff7ed;
    color: #9a3412;
}


/* ── 7. Calendario y panel de detalle ─────── */

.layout-calendario {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}

.tarjeta-calendario {
    padding: 20px;
    min-width: 0;
    /* añadido */
    border-top: 4px solid #273f5c;
}

.panel-detalle {
    background: #ffffff;
    border: 1px solid #e3e1db;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);
    min-height: 340px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 28px;
    border-top: 4px solid #273f5c;
}

.detalle-vacio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 20px;
    text-align: center;
    color: #70706a;
}

.detalle-vacio p {
    font-size: 13px;
    line-height: 1.5;
    max-width: 180px;
}

.detalle-contenido {
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 16px;
}

.detalle-cabecera {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e1db;
}

.detalle-titulo {
    font-family: 'DM Serif Display', serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    /* añadido */
    color: #273f5c;
}

.detalle-filas {
    display: flex;
    flex-direction: column;
}

.detalle-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid #e3e1db;
    gap: 12px;
}

.detalle-fila:last-child {
    border-bottom: none;
}

.detalle-etiqueta {
    font-size: 12px;
    color: #70706a;
    flex-shrink: 0;
}

.detalle-valor {
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    /* que cambia */
    color: #273f5c;
}

/* ── 8. FullCalendar personalización ──────── */

.fc {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
}

.fc .fc-toolbar-title {
    font-family: 'DM Serif Display', serif;
    font-size: 17px;
    font-weight: 400;
    /* modificado */
    color: #273f5c;
}


/* Añadido */
.fc .fc-toolbar-title::first-letter {
    /* la pone en mayúscula */
    text-transform: uppercase;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 16px;
}

.fc .fc-button {
    background: #ffffff;
    border: 1px solid #e3e1db;
    color: #181816;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 8px;
    box-shadow: none;
    text-transform: none;
    font-weight: 400;
}

.fc .fc-button:hover {
    background: #f4f3f0;
    border-color: #e3e1db;
    color: #181816;
    box-shadow: none;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    /* modificado */
    background: #49b1b9;
    border-color: #49b1b9;
    color: #fff;
    box-shadow: none;
}

.fc .fc-button:focus {
    box-shadow: none;
    /* modificado */
    outline: 2px solid #273f5c;
    outline-offset: 1px;
}

/* DÍA DE HOY - FONDO AZUL CLARO */
.fc .fc-daygrid-day.fc-day-today {
    background: #eff4ff !important;
}

.fc .fc-event {
    border: none;
    border-radius: 4px;
    font-size: 11.5px;
    padding: 1px 5px;
    cursor: pointer;
    /*
    height: auto !important;
    padding: 3px 5px !important;
    */
}

/* ^ Texto sin recortar IMPORTANTE CONSULTA ^

.fc .fc-event-title {
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.3;
} */

.fc .fc-event:hover {
    filter: brightness(.92);
}

.fc .fc-col-header-cell-cushion {
    font-weight: 500;
    color: #70706a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-decoration: none;
}

.fc .fc-daygrid-day-number {
    font-size: 12px;
    color: #181816;
    text-decoration: none;
}

.fc .fc-daygrid-day-frame {
    min-height: 100px;
    height: 120px;
}

.fc .fc-scrollgrid-sync-inner {
    height: 100%;
}

.fc-daygrid-day-events {
    min-height: 80px;
}


/* ── 9. DataTables personalización ────────── */

.dataTables_wrapper {
    font-size: 13px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e3e1db;
    border-radius: 8px;
    padding: 5px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    background: #ffffff;
    color: #181816;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
    border-color: #1d4ed8;
}

table.dataTable {
    border-collapse: collapse;
    width: 100% !important;
}

table.dataTable thead th {
    font-weight: 500;
    color: #ffffff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid #e3e1db;
    /* cambiado */
    background: #49b1b9 !important;
    padding: 10px 14px;
}

table.dataTable tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #e3e1db;
    vertical-align: middle;
}

/* AÑADIDO Esto quita el azul de los nombres/enlaces por defecto */
table.dataTable tbody td a {
    color: inherit !important;
    /* Hereda el color del texto de la celda */
    text-decoration: none !important;
    /* Quita el subrayado feo */
    font-weight: 600;
    /* Para que el nombre resalte un poco */
}

table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

table.dataTable tbody tr:hover {
    /* cambiado*/
    background: #273f5c !important;
    color: #ffffff;
    /* añadido */
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #181816 !important;
    padding: 4px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #273f5c !important;
    /* cambiado */
    border-color: #49b1b9 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f4f3f0 !important;
    border-color: #e3e1db !important;
    color: #273f5c !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: #70706a;
}


/* ── 10. Tablas simples (cliente_detalle) ─── */

.tabla-simple {
    width: 100%;
    border-collapse: collapse;
}

.tabla-simple thead tr {
    border-bottom: 1px solid #e3e1db;
    background: #273f5c;
}

.tabla-simple th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.tabla-simple td {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid #e3e1db;
}

.tabla-simple tbody tr:last-child td {
    border-bottom: none;
}

.tabla-simple tbody tr:hover {
    background: #f4f3f0;
}


/* ── 11. Cliente detalle específico ───────── */

.seccion-titulo {
    font-size: 16px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e1db;
}

.datos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dato-etiqueta {
    font-size: 12px;
    color: #70706a;
    margin-bottom: 4px;
}

.dato-valor {
    font-size: 14px;
    font-weight: 500;
}

.campo-completo {
    grid-column: 1 / -1;
}

.mascotas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.mascota-tarjeta {
    border: 1px solid #e3e1db;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.mascota-nombre {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.mascota-dato {
    font-size: 13px;
    color: #70706a;
    margin-bottom: 4px;
}

.mascota-dato strong {
    font-weight: 500;
    color: #181816;
}

.mascota-sin-foto {
    width: 100%;
    height: 150px;
    background: #f4f3f0;
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #70706a;
    font-size: 13px;
    border: 1px dashed #e3e1db;
}


/* ── 12. Mensajes de éxito/error ──────────── */

.mensaje-exito {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.mensaje-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.mensaje-sesion error {
    margin-bottom: 16px;
}


/* ── 13. Utilidades ───────────────────────── */

.mb-20 {
    margin-bottom: 20px;
}

.mt-16 {
    margin-top: 16px;
}

.texto-gris {
    color: #70706a;
    font-size: 13px;
}

.enlace-volver {
    font-size: 13px;
    color: #1d4ed8;
    text-decoration: none;
}

.enlace-volver:hover {
    text-decoration: underline;
}

.mascota-foto {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════════
   MODALES DE EDICIÓN
══════════════════════════════════════════════ */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.modal.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-contenido {
    background: #ffffff;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-cabecera {
    padding: 20px;
    border-bottom: 1px solid #e3e1db;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-titulo {
    font-family: 'DM Serif Display', serif;
    font-size: 18px;
    font-weight: 400;
}

.modal-cerrar {
    background: none;
    border: none;
    font-size: 24px;
    color: #70706a;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.modal-cerrar:hover {
    background: #f4f3f0;
}

.modal-cuerpo {
    padding: 20px;
}

.modal-pie {
    padding: 20px;
    border-top: 1px solid #e3e1db;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ══════════════════════════════════════════════
   BOTONES DE ACCIÓN EN TABLAS
══════════════════════════════════════════════ */

.btn-accion {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-accion:hover {
    opacity: 0.8;
}

.btn-editar {
    background: #3b82f6;
    color: #fff;
}

.btn-completar {
    background: #16a34a;
    color: #fff;
}

.btn-eliminar {
    background: #ef4444;
    color: #fff;
}

.btn-cancelar {
    background: #f3f4f6;
    color: #181816;
}

.btn-guardar {
    background: #1d4ed8;
    color: #fff;
}

.btn-placeholder {
    width: 80px;
    display: inline-block;
}

.acciones-columna {
    display: flex;
    gap: 8px;
    align-items: center;
}




/* ══════════════════════════════════════════════
   FORMULARIOS DENTRO DE MODALES
══════════════════════════════════════════════ */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-campo {
    display: flex;
    flex-direction: column;
}

.form-campo label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #181816;
}

.form-campo input,
.form-campo select,
.form-campo textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e3e1db;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
}

.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
}

.form-campo-completo {
    grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════
   MENSAJES CON SESIÓN
══════════════════════════════════════════════ */

.mensaje-sesion {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mensaje-sesion.exito {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.mensaje-sesion.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

/* ══════════════════════════════════════════════
   FORMULARIOS INLINE (fuera de modal)
══════════════════════════════════════════════ */

.tarjeta-form {
    margin-bottom: 20px;
}

.form-seccion-titulo {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    /* añadido modificado */
    color: #273f5c;
}

.form-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-campo-span2 {
    grid-column: span 2;
}

.form-campo-span3 {
    grid-column: span 3;
}

.form-campo-full {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #273f5c !important;
}

.form-label-hint {
    font-weight: 400;
    color: #70706a;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e3e1db;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
}

.form-input:focus {
    /* cambiado */
    outline: 2px solid #273f5c;
    outline-offset: 1px;
}

/*  AÑADIDO */
/* Preguntar a Felipe, como cambiar el color del select de "Gestion de Citas" */



.form-submit {
    margin-top: 16px;
}

.btn-submit {
    padding: 10px 20px;
    background: #273f5c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.btn-submit:hover {
    background: #49b1b9;
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════
   TABLAS DATATABLES — contenedor
══════════════════════════════════════════════ */

.tabla-wrapper {
    width: 100%;
}

/* ══════════════════════════════════════════════
   FORMULARIOS — misc
══════════════════════════════════════════════ */

.form-accion-fila {
    margin: 0;
}

.texto-usuario-actual {
    font-size: 12px;
    color: #70706a;
}


.cerrar-sesion {
    margin-top: 20px;
    font-size: 13px;
}

/* ══════════════════════════════════════════════
   PACIENTE DETALLE — historial médico
══════════════════════════════════════════════ */

.historial-item {
    border: 1px solid #e3e1db;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.historial-item-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.historial-item-titulo {
    font-weight: 600;
    font-size: 15px;
}

.historial-item-meta {
    font-size: 13px;
    color: #70706a;
    margin-left: 10px;
}

.historial-item-peso {
    font-size: 13px;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}

.historial-item-seccion {
    margin-bottom: 8px;
}

.historial-item-etiqueta {
    font-size: 12px;
    font-weight: 600;
    color: #70706a;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.historial-item-texto {
    font-size: 14px;
}

.historial-item-notas {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0ede8;
}

.historial-item-notas-texto {
    font-size: 13px;
    color: #70706a;
}

/* ══════════════════════════════════════════════
   CITAS — modal completar
══════════════════════════════════════════════ */

.completar-info {
    font-size: 13px;
    color: #70706a;
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════
   ENLACES CON ESTILO BOTÓN
══════════════════════════════════════════════ */

.enlace-tabla {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 500;
}

.enlace-tabla:hover {
    text-decoration: underline;
}

.btn-accion-enlace {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    background: #16a34a;
    color: #fff !important;
    transition: opacity 0.2s;
}

.btn-accion-enlace:hover {
    opacity: 0.8;
    /* añadido */
    color: #ffffff;
    text-decoration: none !important;
}

/* añadido */
/* Usamos el nombre de la tabla y la clase del botón para ganar la prioridad */
table.dataTable tbody td a.btn-accion-enlace {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Añadido Y para el hover, por si acaso */
table.dataTable tbody tr:hover td a.btn-accion-enlace,
table.dataTable tbody td a.btn-accion-enlace:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.8;
}


/* ══════════════════════════════════════════════
   CALENDARIO — leyenda colores inline
══════════════════════════════════════════════ */

.leyenda-punto-confirmada {
    background: #2563eb;
}

.leyenda-punto-pendiente {
    background: #d97706;
}

.leyenda-punto-completada {
    background: #6b7280;
}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */

.pie-pagina {
    padding: 20px 28px;
    border-top: 1px solid #e3e1db;
    color: #8c979f;
    font-size: 12px;
    text-align: center;
    margin-top: auto;
}


/* =============================================
   ADAPTACIÓN RESPONSIVE (Móviles y Tablets)
============================================= */

@media (max-width: 1024px) {

    body {
        flex-direction: column;
        /* Menúarriba y el contenido abajo */
    }

    .menu-lateral {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid #e3e1db;
    }

    .contenedor-principal {
        margin-left: 0;
        /* Fuera el hueco de 220px */
        width: 100%;
    }

    .menu-nav {
        flex-direction: row;
        /* Los botones del menú ahora van de lado */
        overflow-x: auto;
        /* Si no caben, scroll horizontal */
        padding-bottom: 10px;
    }

    .menu-enlace {
        white-space: nowrap;
        /* Que no se corten las palabras */
    }

    .menu-pie {
        display: none;
        /* En móvil escondemos el pie del menú para ahorrar espacio */
    }

    .contenido {
        padding: 15px;
        /* Reducimos el margen lateral en móviles */
    }

    .pie-pagina {
        padding: 15px;
        margin-top: 20px;
    }

    /* 2. Ajuste de Grids y Formularios */
    .form-grid,
    .form-grid-2,
    .form-grid-3,
    .form-grid-4,
    .datos-grid {
        grid-template-columns: 1fr !important;
        /* Todo a una sola columna */
        gap: 10px;
    }

    /* Forzamos que los campos que ocupaban varias columnas ahora ocupen solo una */
    .form-campo-span2,
    .form-campo-span3,
    .form-campo-full,
    .campo-completo {
        grid-column: span 1 !important;
    }

    .tarjeta-cuerpo {
        padding: 15px;
        /* Un poco más apretadito para ganar pantalla */
    }

    .btn-submit {
        width: 100%;
        /* El botón de guardar, que ocupe todo el ancho en móvil */
    }


    /* 3. El reto de las Tablas Responsive */
    .tabla-wrapper {
        overflow-x: auto;
        /* Permite deslizar la tabla lateralmente con el dedo */
        display: block;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        /* Suaviza el scroll en iPhone */
    }

    table.dataTable thead th {
        white-space: nowrap;
        /* Evita que los títulos de la tabla se corten en 2 líneas */
    }

    /* Reducimos el tamaño de las etiquetas y botones en móvil */
    .etiqueta {
        padding: 2px 6px;
        font-size: 10px;
    }

    .btn-accion {
        padding: 5px 8px;
        font-size: 11px;
    }

    .acciones-columna {
        display: flex;
        flex-direction: column;
        /* En móvil, los botones (Editar/Eliminar) uno sobre otro */
        gap: 4px;
    }

    .btn-placeholder {
        display: none;
        /* Quitamos espacios vacíos en móvil */
    }

    /* 4. Ajustes finales de finura */

    /* Las fotos de las mascotas ya no pueden tener un tamaño fijo */
    .mascota-foto,
    .mascota-sin-foto {
        height: 200px;
        /* Un poco más grandes en móvil para que se vean bien */
        width: 100%;
    }

    /* El modal de EDITAR que hicimos antes */
    .modal-contenido {
        width: 95%;
        /* Casi todo el ancho del móvil */
        margin: 10px;
        /* Que no toque los bordes físicos del teléfono */
        max-height: 85vh;
        /* Que no se salga por arriba/abajo */
    }

    /* El título de la página (Gestión de Citas) */
    .cabecera-pagina {
        height: auto;
        /* Que crezca si el título es largo */
        padding: 15px 10px;
    }

    .titulo-pagina {
        font-size: 18px;
        /* Un pelín más pequeño para que no rompa en dos líneas */
        margin-left: 5px;
    }

    /* Escondemos elementos secundarios para limpiar la vista */
    .subtitulo-pagina {
        display: none;
        /* En móvil, con el título sobra, ahorramos espacio */
    }
}