/* -------------------------------------------------------------------------
   GestFel CSS · 60-responsive-tables-actions.css
   Correcciones finales de tablas responsive, acciones, formularios embebidos y badges compactas.
   Orden de carga: respetar la numeración de los ficheros para conservar
   la cascada original y evitar regresiones visuales.
   ------------------------------------------------------------------------- */

@layer tables {

/* Correcciones visuales: modal CER, saltos de línea y acciones del dashboard */
.notice-board a,
.task-alert-panel .widget-head a,
.task-alert-item > a,
.task-alert-item a[href],
.notice-item a,
.notification-item-main a,
.timeline-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.48rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: #ffffff;
  color: #334155;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 36, 55, 0.06);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.notice-board a:hover,
.notice-board a:focus-visible,
.task-alert-panel .widget-head a:hover,
.task-alert-panel .widget-head a:focus-visible,
.task-alert-item > a:hover,
.task-alert-item > a:focus-visible,
.task-alert-item a[href]:hover,
.task-alert-item a[href]:focus-visible,
.notice-item a:hover,
.notice-item a:focus-visible,
.notification-item-main a:hover,
.notification-item-main a:focus-visible,
.timeline-item a:hover,
.timeline-item a:focus-visible {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.48);
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(15, 36, 55, 0.1);
  transform: translateY(-1px);
}
.notice-board p > a,
.timeline-item p > a,
.notification-item-main p > a {
  margin-top: .45rem;
}
.task-alert-panel .widget-head a,
.notice-board p > a,
.timeline-item p > a,
.notification-item-main p > a {
  white-space: nowrap;
}
.task-alert-item > a,
.task-alert-item a[href] {
  justify-self: end;
}
.task-alert-item[data-click-card] {
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.task-alert-item[data-click-card]:hover,
.task-alert-item[data-click-card]:focus-visible {
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 36, 55, 0.1);
  transform: translateY(-1px);
  outline: 2px solid rgba(11, 125, 109, .2);
  outline-offset: 2px;
}
.project-info-modal {
  overflow: auto;
  padding: 12px;
}
.project-info-modal__dialog {
  width: min(960px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  margin: auto;
  padding: clamp(1rem, 2vw, 1.8rem);
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.project-info-modal__close {
  position: sticky;
  top: 0.25rem;
  right: 0;
  margin-left: auto;
  margin-right: 0;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
  flex-shrink: 0;
}
.project-info-modal__header {
  margin-top: .1rem;
}
.project-info-modal__dialog > *:last-child {
  margin-bottom: max(.5rem, env(safe-area-inset-bottom));
}
@media (max-width: 720px) {
  .project-info-modal {
    padding: 8px;
  }
  .project-info-modal__dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 20px;
    padding: 0.95rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .project-info-modal__close {
    top: 0;
    width: 44px;
    height: 44px;
    font-size: 1.9rem;
  }
  .task-alert-panel .widget-head a,
  .task-alert-item > a,
  .task-alert-item a[href],
  .notice-board p > a,
  .timeline-item p > a,
  .notification-item-main p > a,
  .notice-actions .btn,
  .notification-actions-row .btn {
    width: 100%;
    justify-content: center;
  }
}


/* -------------------------------------------------------------------------
   Sistema único de tablas, cards móviles, acciones y badges

   Criterios de mantenimiento:
   1. Las tablas de escritorio deben seguir siendo tablas reales.
   2. Solo .responsive-list-table se convierte en cards en móvil.
   3. Solo los controles dentro de td.actions tienen apariencia de botón.
   4. Las badges son siempre compactas con fit-content.
   ------------------------------------------------------------------------- */
/* Columna de acciones en escritorio: conserva la geometría de tabla. */
@media (min-width: 721px) {
  .table th.actions,
  .table thead th.actions,
  .table th[data-label="Acciones"],
  .table thead th[data-label="Acciones"] {
    display: table-cell;
    flex: none;
    width: 1%;
    min-width: 14rem;
    max-width: none;
    white-space: nowrap;
    text-align: left;
    font-size: .85rem;
    line-height: 1.2;
    color: var(--muted);
    background: #fafafa;
  }

  .table td.actions,
  .table tbody td.actions {
    display: table-cell;
    flex: none;
    float: none;
    width: 1%;
    min-width: 14rem;
    max-width: 26rem;
    white-space: normal;
    text-align: left;
    line-height: normal;
    font-size: 0;
  }

  .table :is(td.actions, th.actions)::before {
    display: none;
    content: none;
  }
}

/* Botones de acción: base neutra. */
.table td.actions > * {
  margin: 0 .4rem .35rem 0;
  vertical-align: middle;
  font-size: .95rem;
}
.table td.actions > *:last-child { margin-right: 0; }
.table td.actions > :is(a, button, .btn, .button),
.table td.actions > details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: fit-content;
  max-width: fit-content;
  min-height: 38px;
  padding: .48rem .85rem;
  border: 1px solid rgba(148, 163, 184, .38);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 36, 55, .06);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.table td.actions > :is(a, button, .btn, .button):is(:hover, :focus-visible),
.table td.actions > details > summary:is(:hover, :focus-visible) {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, .48);
  color: #0f172a;
  transform: translateY(-1px);
}

/* Acciones positivas: editar, crear, registrar, subir. */
.table td.actions > :is(a[href*="_form.php"], a[href*="#editar"], a[href*="edit"], a[href*="upload"], a[href*="adoption_form.php"], .btn-primary, .button.primary) {
  border-color: rgba(11, 125, 109, .26);
  background: #f4fbf9;
  color: var(--teal);
}
.table td.actions > :is(a[href*="_form.php"], a[href*="#editar"], a[href*="edit"], a[href*="upload"], a[href*="adoption_form.php"], .btn-primary, .button.primary):is(:hover, :focus-visible) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Acciones sensibles: baja, borrar, eliminar, fallecimiento. */
.table td.actions > :is(.danger, .btn-danger),
.table td.actions > :is(details.inline-danger, .inline-danger) > summary,
.table td.actions > details > summary.danger,
.table td.actions :is(.inline-danger, details.inline-danger) button {
  border-color: rgba(220, 38, 38, .22);
  background: #fef2f2;
  color: #b42318;
}
.table td.actions > :is(.danger, .btn-danger):is(:hover, :focus-visible),
.table td.actions > :is(details.inline-danger, .inline-danger) > summary:is(:hover, :focus-visible),
.table td.actions > details > summary.danger:is(:hover, :focus-visible),
.table td.actions :is(.inline-danger, details.inline-danger) button:is(:hover, :focus-visible) {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

/* Formularios embebidos en acciones: reportes, salud e incidencias. */
.table td.actions details {
  display: inline-block;
  vertical-align: middle;
  margin: 0 .4rem .35rem 0;
}
.table td.actions details[open] {
  display: block;
  width: min(100%, 320px);
  margin-top: .45rem;
  white-space: normal;
}
.table td.actions details form,
.table td.actions > form {
  display: grid;
  gap: .45rem;
  width: min(100%, 320px);
  min-width: 220px;
  max-width: 320px;
  white-space: normal;
}
.table td.actions form :is(select, textarea, input:not([type="hidden"])) {
  width: 100%;
  min-width: 0;
  font-size: .95rem;
}
.table td.actions form button { width: 100%; }
:is(.status-reports-table, .reports-table, .incidents-table, .health-events-table) td.actions {
  width: 18rem;
  min-width: 16rem;
  white-space: normal;
}
:is(.status-reports-table, .reports-table, .incidents-table, .health-events-table) td.actions form {
  width: 100%;
  max-width: 20rem;
}

/* Contenedores internos de acciones, fuera de celdas principales. */
.table td :is(.actions, .form-actions, .button-row, .action-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  white-space: normal;
}

/* Móvil: tarjetas legibles para tablas marcadas como responsive-list-table. */
@media (max-width: 720px) {
  .app-main .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .app-main .table-wrap > table.table:not(.responsive-list-table),
  .app-main table.table:not(.responsive-list-table) {
    width: max-content !important;
    min-width: 760px !important;
    table-layout: auto;
  }

  .app-main table.table.responsive-list-table,
  .app-main .table-wrap > table.table.responsive-list-table {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0 .85rem !important;
    table-layout: auto;
  }

  .app-main table.table.responsive-list-table thead,
  .app-main table.table.responsive-list-table tr:has(> th),
  .app-main table.table.responsive-list-table tr.table-mobile-header {
    display: none !important;
  }

  .app-main table.table.responsive-list-table tbody,
  .app-main table.table.responsive-list-table tr {
    display: block;
    width: 100%;
  }

  .app-main table.table.responsive-list-table tr:not(:has(> th)) {
    margin: 0 0 .9rem !important;
    padding: .9rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(15, 36, 55, .05) !important;
  }

  .app-main table.table.responsive-list-table tr:last-child {
    margin-bottom: 0 !important;
  }

  .app-main table.table.responsive-list-table th {
    display: none !important;
  }

  .app-main table.table.responsive-list-table td {
    display: grid;
    grid-template-columns: minmax(8.5rem, 40%) minmax(0, 1fr);
    gap: .65rem !important;
    align-items: start !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 38px !important;
    padding: .58rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(219, 231, 228, .92) !important;
    white-space: normal !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .app-main table.table.responsive-list-table td:last-child {
    border-bottom: 0 !important;
  }

  .app-main table.table.responsive-list-table td::before {
    content: attr(data-label) !important;
    display: block !important;
    min-width: 0 !important;
    color: var(--muted) !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .app-main table.table.responsive-list-table td[data-label="Foto"] {
    grid-template-columns: 1fr;
  }

  .app-main table.table.responsive-list-table td[data-label="Foto"]::before {
    display: none !important;
  }

  .app-main table.table.responsive-list-table td:is(.actions, [data-label="Acción"], [data-label="Acciones"], [data-label="Detalle"], [data-label="Ficha"], [data-label="Ver"]) {
    display: flex;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    font-size: 0;
  }

  .app-main table.table.responsive-list-table td:is(.actions, [data-label="Acción"], [data-label="Acciones"], [data-label="Detalle"], [data-label="Ficha"], [data-label="Ver"])::before {
    flex: 0 0 100% !important;
  }

  .app-main table.table.responsive-list-table td > *,
  .app-main table.table.responsive-list-table td a,
  .app-main table.table.responsive-list-table td button,
  .app-main table.table.responsive-list-table td form,
  .app-main table.table.responsive-list-table td details,
  .app-main table.table.responsive-list-table td select {
    max-width: fit-content !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .app-main table.table.responsive-list-table td.actions > :is(details, form),
  .app-main table.table.responsive-list-table td:is([data-label="Acción"], [data-label="Acciones"]) > :is(details, form) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
  }

  .app-main table.table.responsive-list-table .thumb {
    width: 64px !important;
    height: 64px !important;
  }

  /* Las tarjetas de esta tabla apilada fijan fondo blanco con !important;
     al vivir en @layer tables (antes que @layer theme en el orden global),
     ninguna regla de la capa theme podia ganarles aunque usara !important
     (las capas invierten su prioridad para declaraciones !important). El
     override de modo oscuro tiene que declararse en esta misma capa. */
  html[data-gestfel-theme="dark"] .app-main table.table.responsive-list-table tr:not(:has(> th)) {
    background: var(--gf-panel, #15272d) !important;
    border-color: var(--gf-line, rgba(157, 204, 197, .24)) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
  }

  html[data-gestfel-theme="dark"] .app-main table.table.responsive-list-table td {
    color: var(--gf-text, #eefaf7);
    border-bottom-color: var(--gf-line, rgba(157, 204, 197, .24)) !important;
  }

  html[data-gestfel-theme="dark"] .app-main table.table.responsive-list-table td::before {
    color: var(--gf-muted, #a7bdb8) !important;
  }
}

@media (max-width: 420px) {
  .app-main table.table.responsive-list-table td {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .app-main table.table.responsive-list-table td::before {
    margin-bottom: .12rem !important;
  }
}

/* Badges compactas: nunca deben ocupar todo el ancho de la card/celda. */
.badge,
.report-pill,
.pill,
.feeding-badge,
.status-badge,
.health-badge,
.cat-badge,
.chip,
.label-pill,
.tag,
[class^="badge-"],
[class*=" badge-"] {
  width: fit-content;
  max-width: fit-content;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   Filtros del listado general de gatos
   ------------------------------------------------------------------------- */
.cats-filter-card {
  display: grid;
  gap: 1rem;
}

.filter-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.filter-card-head h2 {
  margin-bottom: 0.25rem;
}

.filter-card-head p {
  margin: 0;
}

.cats-filter-search-row {
  display: grid;
}

.cats-filter-search-field {
  width: min(100%, 40rem);
}

.cats-filter-grid {
  display: grid;
  gap: 1rem;
}

.cats-filter-grid--single-line {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
}

.cats-filter-card label {
  display: grid;
  gap: 0.45rem;
  font-weight: 800;
  color: var(--navy);
}

.cats-filter-card input,
.cats-filter-card select {
  width: 100%;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

@media (max-width: 1680px) {
  .cats-filter-grid--single-line {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .filter-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .cats-filter-search-field {
    width: 100%;
  }

  .cats-filter-grid--single-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cats-filter-grid--single-line {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    flex-direction: column;
  }

  .filter-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   Resumen de actividad visible en móvil
   .dashboard-preview.public-preview se fuerza visible; otros paneles
   privados pueden seguir ocultándose si lo necesitan.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .dashboard-preview.public-preview,
  .public-preview.dashboard-preview {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    overflow: visible;
  }

  .dashboard-preview.public-preview .preview-content,
  .public-preview.dashboard-preview .preview-content {
    display: grid;
    gap: 1rem;
    min-width: 0;
  }

  .dashboard-preview.public-preview .preview-content > h3,
  .public-preview.dashboard-preview .preview-content > h3 {
    text-align: center;
    font-size: clamp(1.65rem, 8vw, 2.1rem);
    line-height: 1.12;
  }

  .dashboard-preview.public-preview .preview-sidebar,
  .public-preview.dashboard-preview .preview-sidebar {
    display: none !important;
  }

  .dashboard-preview.public-preview .public-summary-grid,
  .public-preview.dashboard-preview .public-summary-grid,
  .dashboard-preview.public-preview .public-insight-grid,
  .public-preview.dashboard-preview .public-insight-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

} /* end @layer tables */