*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;background:#f7f7f8;color:#222}a{color:inherit}
.topbar{background:#0f172a;color:#fff;padding:12px 16px}
.container{max-width:1100px;margin:16px auto;padding:0 16px}
#calendar{background:#fff;border-radius:12px;padding:8px;box-shadow:0 2px 20px rgba(0,0,0,.06)}
.help{color:#555;margin-top:12px}
table{font-size:14px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:1000}
.modal{background:#fff;border-radius:12px;max-width:640px;width:calc(100% - 32px);padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.modal-content{margin:12px 0}
.btn{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid #d1d5db;background:#f9fafb;text-decoration:none;color:#111}
.btn.primary{background:#2563eb;color:#fff;border-color:#1d4ed8}
/* chips leyenda */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid #ddd;background:#fff}
.chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,#999)}

/* filtros por tipo (oculta eventos aplicando clases en #calWrap) */
#calWrap.hide-apertura .fc-event.tipo-apertura,
#calWrap.hide-cierre .fc-event.tipo-cierre,
#calWrap.hide-subsanacion .fc-event.tipo-subsanacion,
#calWrap.hide-resolucion .fc-event.tipo-resolucion { display:none !important; }
/*botones*/
.actions{display:flex;gap:8px;align-items:stretch} /* ya lo tienes, por si acaso */
.actions .btn{flex:1 1 0;text-align:center}
@media (max-width:480px){
  .actions{flex-direction:column}
  .actions .btn{width:100%}
}
/* Que la toolbar pueda partirse en varias líneas y sea más compacta */
.fc .fc-toolbar.fc-header-toolbar {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Ajustes en pantallas pequeñas */
@media (max-width: 768px) {
  .fc .fc-toolbar-title { font-size: 1.15rem; }
  .fc .fc-button { padding: 0.35rem 0.55rem; }
  .fc .fc-button-group { gap: 4px; }
}

/* ===== Admin responsive (scopeado, gana al CSS del header) ===== */

/* ===== Ajuste definitivo de grids ===== */

/* Grid de página: solo el de 1er nivel (lateral + listado) */
.admin-wrap > .grid.two{
  grid-template-columns:minmax(260px,340px) 1fr;
}
@media (max-width:1024px){
  .admin-wrap > .grid.two{ grid-template-columns:1fr; }
}

/* Grids internos dentro de tarjetas (ej. Periodicidad / Estado) */
.admin-wrap .card .grid.two{
  grid-template-columns:1fr 1fr;
}
@media (max-width:560px){
  .admin-wrap .card .grid.two{ grid-template-columns:1fr; }
}

/* Sticky solo para el lateral de nivel superior */
@media (min-width:1025px){
  .admin-wrap > .grid.two > .card.aside{ position:sticky; top:76px; }
}
@media (max-width:1024px){
  .admin-wrap > .grid.two > .card.aside{ position:static; }
}

/* (Opcional) compactar label/controls dentro de grids internos */
.admin-wrap .card .grid.two > label{ margin:0; }
.admin-wrap .card .grid.two > label > select,
.admin-wrap .card .grid.two > label > input{ width:100%; }

/* ===== Fix overflow y mobile en admin ===== */

/* 1) Los hijos del grid deben poder encoger; evita que el grid “empuje” la página */
.admin-wrap > .grid.two > * { min-width: 0; }              /* lateral y listado */
.admin-wrap .card { min-width: 0; }                        /* por si hay grids anidados */

/* 2) Grid de página (lateral + listado) */
.admin-wrap > .grid.two { grid-template-columns: minmax(260px,340px) 1fr; }
@media (max-width: 1024px) {
  .admin-wrap > .grid.two { grid-template-columns: 1fr; }
}

/* 3) Grids internos (ej. Periodicidad / Estado): 50/50 y en móvil una columna */
.admin-wrap .card .grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
  .admin-wrap .card .grid.two { grid-template-columns: 1fr; }
}

/* 4) Sticky solo para el lateral de 1er nivel (no en móvil) */
@media (min-width: 1025px) {
  .admin-wrap > .grid.two > .card.aside { position: sticky; top: 76px; }
}
@media (max-width: 1024px) {
  .admin-wrap > .grid.two > .card.aside { position: static; }
}

/* 5) Tabla: scroll horizontal dentro del contenedor, no en la página */
.admin-wrap .table-scroll {
  overflow-x: auto;                  /* clave */
  -webkit-overflow-scrolling: touch; /* inercia en iOS */
}
.admin-wrap .table-scroll table {
  width: 100%;
  min-width: 640px;                  /* puedes bajar o subir este valor */
  border-collapse: collapse;
}
.admin-wrap .table-scroll th,
.admin-wrap .table-scroll td { white-space: nowrap; }

.checks-list label.item{display:flex;gap:8px;align-items:center;padding:4px 2px;cursor:pointer}
.checks-list label.item:hover{background:#f8fafc}

/* ====== Controles de formulario unificados (match cards & tabla) ====== */
:root{
  --ui-bg:#fff;
  --ui-border:#e5e7eb;
  --ui-border-strong:#d1d5db;
  --ui-text:#111827;
  --ui-muted:#6b7280;
  --ui-focus:#2563eb;
  --ui-radius:10px; /* 10–12 queda bien, usa el mismo en cards/tabla */
}

label{display:block;font-weight:600;color:var(--ui-text);margin:8px 0 6px}
label small{font-weight:400;color:var(--ui-muted)}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="date"],
select,
textarea{
  width:100%;
  font: 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--ui-text);
  background:var(--ui-bg);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  padding:10px 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

textarea{min-height:92px;resize:vertical}

/* Selects: misma altura y caret sutil */
select{
  height:38px;
  padding-right:34px; /* hueco para la flecha */
  appearance:none;
  background-image:
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236b7280' d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* Focus ring consistente */
input:focus,
select:focus,
textarea:focus{
  outline:0;
  border-color:var(--ui-focus);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Placeholder tenue */
::placeholder{color:#9ca3af}

/* Disabled/read-only */
input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly]{
  background:#f9fafb; color:#6b7280; cursor:not-allowed
}

/* Botones ya los tienes; igualamos “acciones” para que no salten */
.actions{display:flex;gap:8px;align-items:stretch}
.actions .btn{flex:1 1 0;text-align:center}

/* Checkboxes/radios con el color de la app */
input[type="checkbox"], input[type="radio"]{ accent-color: var(--ui-focus); }

/* Lista de interesados (checkboxes) con estética de la tabla */
.checks-list{
  background:var(--ui-bg);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.checks-list label.item{
  display:flex; gap:10px; align-items:center;
  padding:8px 10px; cursor:pointer;
  border-bottom:1px solid #f3f4f6;
  font-size:14px; color:var(--ui-text);
}
.checks-list label.item:last-child{border-bottom:0}
.checks-list label.item:hover{background:#f8fafc}

/* Inputs dentro de .card más compactos en móvil */
@media (max-width:640px){
  input[type="text"], input[type="email"], input[type="url"], input[type="password"],
  input[type="date"], select, textarea { font-size:16px; } /* evita zoom iOS */
}

/* Alineación de pares “Periodicidad/Estado” como en tabla */
.grid.two > label > select,
.grid.two > label > input{height:38px}

/* Asegurar que el modal del calendario queda por encima de todo */
.modal-overlay{ z-index: 9999 !important; }

/* (opcional) si usas popovers de FullCalendar, que queden por debajo del modal */
.fc .fc-popover{ z-index: 9998; }

#calWrap.hide-justificacion .fc-event.tipo-justificacion { display:none !important; }