/* Estilos custom de Polaris — portados de polaris-handoff-clojurescript.md (seccion 3).
   Tipografia: Lato ya viene con semantic.min.css (Fomantic), no se cargan Space Grotesk /
   Inter / JetBrains Mono del mockup original — ver devPlan/PLAN_MOCKUP_IMPLEMENTACION.md
   seccion 5. .mono usa stack monoespacio de sistema en vez de JetBrains Mono. */

:root{
  --bg:#18283A;
  --panel:#132030;
  --panel-2:#0F1A26;
  --border:#25384C;
  --border-soft:#1D2E40;
  --accent:#D9A75A;
  --accent-soft:rgba(217,167,90,0.14);
  --accent-soft-2:rgba(217,167,90,0.28);
  --text:#E7EDF3;
  --muted:#8CA0B3;
  --muted-2:#5E7488;
  --success:#4FB286;
  --success-soft:rgba(79,178,134,0.14);
  --secondary:#7FA8C9;
  --secondary-soft:rgba(127,168,201,0.14);
  --danger:#E3766F;
  --danger-soft:rgba(227,118,111,0.14);
}

*{ box-sizing:border-box; }
html,body{
  /* semantic.min.css fija html{height:100%}, que sin esto clipea al alto del viewport y
     corta el fondo cuando el contenido (ej. lista larga de mascotas) es mas alto. */
  height:auto !important;
  min-height:100%;
  background:var(--bg) !important;
  color:var(--text);
  overflow-x:hidden;
}
body{ margin:0; }

.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; }

::selection{ background:var(--accent-soft-2); color:var(--text); }

/* ---------- Grid shell (Fomantic responsive grid) ---------- */
.polaris-shell-grid.ui.stackable.grid{
  margin:0 !important;
  min-height:100vh;
}
.polaris-shell-grid.ui.grid > .column{
  padding:0 !important;
}

/* ---------- Left panel ---------- */
.polaris-left{
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:relative;
  padding:28px 22px;
  min-height:100vh;
}

.polaris-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
}
.polaris-brand svg{ flex:0 0 auto; }
.polaris-brand-text{
  font-size:x-large;
  font-weight:700;
  color:var(--text);
  text-transform:lowercase;
  letter-spacing:0.2em;
  padding-top:10px;
  padding-bottom:10px;
  width:10%;
}

.polaris-clinic-lockup{
  margin-bottom:22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:center;
}
.polaris-clinic-lockup img{
  height:30px;
  width:auto;
  opacity:0.92;
}

.polaris-portal-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:var(--muted-2);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:8px;
}
.polaris-portal-label::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}

.polaris-constellation{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.5;
  z-index:0;
}

.polaris-left > *:not(.polaris-constellation){ position:relative; z-index:1; }

.polaris-auth-title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:4px;
}
.polaris-auth-help{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:20px;
}
.polaris-field-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--muted);
  margin-bottom:6px;
  display:block;
}
.polaris-left input[type="text"],
.polaris-left input[type="email"]{
  background:var(--panel-2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:14px !important;
}
.polaris-left input::placeholder{ color:var(--muted-2) !important; opacity:1; }
.polaris-left input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 1px var(--accent-soft-2) !important;
}

.polaris-btn-primary.ui.button{
  background:var(--accent) !important;
  color:#1B140A !important;
  font-weight:600;
  box-shadow:none !important;
}
.polaris-btn-primary.ui.button:hover{ background:#E4B672 !important; }
.polaris-btn-ghost.ui.button{
  background:transparent !important;
  color:var(--muted) !important;
  border:1px solid var(--border) !important;
}
.polaris-btn-ghost.ui.button:hover{ color:var(--text) !important; border-color:var(--muted-2) !important; }
.polaris-btn-tiny.ui.button{
  padding:7px 12px !important;
  font-size:11.5px !important;
}

.polaris-otp-sent{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--success);
  background:var(--success-soft);
  border:1px solid rgba(79,178,134,0.3);
  padding:8px 12px;
  border-radius:6px;
  margin-bottom:18px;
}

.polaris-alert-error{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--danger);
  background:var(--danger-soft);
  border:1px solid rgba(227,118,111,0.3);
  padding:8px 12px;
  border-radius:6px;
  margin-bottom:18px;
}

.polaris-tutor-card{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:24px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.polaris-tutor-card:hover{ background:var(--border-soft); }
.polaris-tutor-card.active{
  background:var(--accent-soft);
  border-color:var(--accent-soft-2);
}
.polaris-tutor-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
}
.polaris-tutor-avatar{
  flex:0 0 auto;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid var(--accent-soft-2);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  font-weight:700;
}
.polaris-tutor-name{
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
.polaris-tutor-top-info{ flex:1; min-width:0; }
.polaris-tutor-id-inline{
  font-size:11.5px;
  color:var(--muted);
  margin-top:1px;
}

/* Vista "Datos del tutor" (panel derecho) */
.polaris-tutor-detail-fields{
  display:flex;
  flex-direction:column;
  gap:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:28px;
}
.polaris-tutor-field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 18px;
  border-bottom:1px solid var(--border-soft);
}
.polaris-tutor-field-row:last-child{ border-bottom:none; }
.polaris-tutor-field-label{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:11px;
  flex:0 0 auto;
}
.polaris-tutor-field-value{
  color:var(--text);
  font-size:13.5px;
  text-align:right;
}

/* Modal "Solicitar cambios" */
.polaris-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(8,14,20,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
}
.polaris-modal{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:26px;
  width:100%;
  max-width:440px;
}
.polaris-modal-title{
  font-size:17px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.polaris-modal-help{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:18px;
}
.polaris-modal-help a{ color:var(--accent); text-decoration:none; }
.polaris-modal-help a:hover{ text-decoration:underline; }
.polaris-modal textarea{
  width:100%;
  min-height:100px;
  background:var(--panel-2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:6px;
  padding:10px 12px;
  font-size:13.5px;
  resize:vertical;
  margin-bottom:16px;
}
.polaris-modal textarea:focus{
  outline:none;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 1px var(--accent-soft-2);
}
.polaris-captcha-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px 14px;
  margin-bottom:18px;
}
.polaris-captcha-checkbox{
  width:20px; height:20px;
  border-radius:4px;
  border:2px solid var(--muted-2);
  flex:0 0 auto;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, border-color .12s ease;
}
.polaris-captcha-checkbox.checked{
  background:var(--success);
  border-color:var(--success);
}
.polaris-captcha-label{
  font-size:12.5px;
  color:var(--muted);
  flex:1;
}
.polaris-captcha-badge{
  font-size:9px;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.polaris-modal-actions{
  display:flex;
  gap:10px;
}
.polaris-modal-actions button{ flex:1; }
.polaris-modal-success{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--success);
  background:var(--success-soft);
  border:1px solid rgba(79,178,134,0.3);
  padding:10px 12px;
  border-radius:6px;
  margin-bottom:16px;
}

.polaris-section-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted-2);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.polaris-mascot-list{ display:flex; flex-direction:column; gap:6px; }
.polaris-mascot-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.polaris-mascot-item:hover{ background:var(--border-soft); }
.polaris-mascot-item.active{
  background:var(--accent-soft);
  border-color:var(--accent-soft-2);
}
.polaris-mascot-avatar{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--border);
  font-size:16px;
}
.polaris-mascot-item.active .polaris-mascot-avatar{
  border-color:var(--accent-soft-2);
}
.polaris-mascot-info{ flex:1; min-width:0; }
.polaris-mascot-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.polaris-mascot-role-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
}
.polaris-mascot-species{
  font-size:11px;
  color:var(--muted);
}
.polaris-role-badge{
  display:inline-flex;
  align-items:center;
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:1px 7px;
  border-radius:100px;
}
.polaris-role-badge.principal{
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid var(--accent-soft-2);
}
.polaris-role-badge.secundario{
  background:var(--secondary-soft);
  color:var(--secondary);
  border:1px solid rgba(127,168,201,0.3);
}
.polaris-mascot-star{
  flex:0 0 auto;
  opacity:0;
  transition:opacity .12s ease;
}
.polaris-mascot-item.active .polaris-mascot-star{ opacity:1; }

.polaris-logout{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.polaris-logout:hover{ color:var(--text); }
.polaris-logout span{ white-space:nowrap; }

.polaris-right{
  padding:36px 44px;
  min-width:0;
  position:relative;
}
.polaris-right > *:not(.polaris-constellation){ position:relative; z-index:1; }
.polaris-right-inner{ max-width:860px; }

.polaris-mobile-back{
  display:none;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:13px;
  margin-bottom:18px;
  cursor:pointer;
}
.polaris-mobile-back:hover{ color:var(--text); }

.polaris-empty-state{
  color:var(--muted);
  font-size:13.5px;
  padding:40px 0;
  text-align:center;
}

.polaris-mascot-header{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.polaris-mascot-header-avatar{
  flex:0 0 auto;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
}
.polaris-mascot-header-avatar.has-photo{
  background:var(--accent-soft);
  border-color:var(--accent-soft-2);
  color:var(--accent);
  overflow:hidden;
}
.polaris-mascot-header-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.polaris-mascot-header-name{
  font-size:26px;
  font-weight:700;
  color:var(--text);
  margin:0 0 2px 0;
}
.polaris-mascot-header-sub{
  font-size:13px;
  color:var(--muted);
}
.polaris-mascot-header-sub .polaris-role-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid var(--accent-soft-2);
  padding:2px 9px;
  border-radius:100px;
  font-size:11px;
  font-weight:600;
  margin-left:8px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.polaris-mascot-header-sub .polaris-role-pill.secundario{
  background:var(--secondary-soft);
  color:var(--secondary);
  border:1px solid rgba(127,168,201,0.3);
}

.polaris-data-grid{
  display:grid;
  /* 9 celdas fijas (especie, raza, sexo, fecha_nacimiento, edad|fallecido, color,
     esterilizado, microchip, peso) — 3 columnas da 3 filas exactas, sin celda huerfana. */
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:22px;
}
.polaris-data-cell{
  background:var(--panel);
  padding:14px 16px;
}
.polaris-data-cell-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--muted-2);
  margin-bottom:5px;
}
.polaris-data-cell-value{
  font-size:14px;
  color:var(--text);
  font-weight:500;
}
.polaris-data-cell-value.mono{ font-size:13px; }
.polaris-data-cell-value.placeholder{
  color:var(--muted-2);
  font-style:italic;
  font-weight:400;
}

.polaris-subcard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:22px;
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}
.polaris-subcard-heading{
  width:100%;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--muted-2);
  margin-bottom:2px;
}
.polaris-subcard-field{ min-width:140px; }
.polaris-subcard-field .label{
  font-size:10.5px;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:3px;
}
.polaris-subcard-field .value{
  font-size:13.5px;
  color:var(--text);
}
.polaris-subcard-field .value.placeholder{
  color:var(--muted-2);
  font-style:italic;
}
.polaris-subcard-empty{
  font-size:12.5px;
  color:var(--muted-2);
  font-style:italic;
}

.polaris-tutor-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  color:var(--muted);
  cursor:pointer;
  margin-top:12px;
  user-select:none;
}
.polaris-tutor-toggle:hover{ color:var(--accent); }
.polaris-tutor-toggle svg{ transition:transform .15s ease; }
.polaris-tutor-toggle.open svg{ transform:rotate(180deg); }
.polaris-tutor-extra{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.polaris-section-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  margin:0 0 12px 0;
  display:flex;
  align-items:center;
  gap:8px;
}
.polaris-section-title .num{
  width:18px; height:18px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:0;
  flex:0 0 auto;
}

.polaris-hc-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:30px;
  flex-wrap:wrap;
  gap:14px;
}
.polaris-hc-left{ display:flex; align-items:center; gap:14px; }
.polaris-hc-icon{
  width:42px; height:42px;
  border-radius:8px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  flex:0 0 auto;
}
.polaris-hc-title{ font-size:14.5px; font-weight:600; color:var(--text); }
.polaris-hc-desc{ font-size:12px; color:var(--muted); margin-top:2px; }
.polaris-hc-disclaimer{
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted-2);
  margin:-18px 0 30px 0;
}
.polaris-hc-disclaimer a{ color:var(--accent); text-decoration:none; }
.polaris-hc-disclaimer a:hover{ text-decoration:underline; }

.polaris-doc-list{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:30px;
}
.polaris-doc-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 18px;
  border-bottom:1px solid var(--border-soft);
}
.polaris-doc-row:last-child{ border-bottom:none; }
.polaris-doc-icon{
  width:34px; height:34px;
  border-radius:7px;
  background:var(--panel-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  flex:0 0 auto;
}
.polaris-doc-name{ font-size:13.5px; color:var(--text); font-weight:500; }
.polaris-doc-meta{ font-size:11.5px; color:var(--muted-2); margin-top:1px; }
.polaris-doc-meta .mono{ font-size:11px; }
.polaris-doc-download{
  margin-left:auto;
  color:var(--muted);
  cursor:pointer;
  flex:0 0 auto;
  padding:6px;
  border-radius:6px;
}
.polaris-doc-download:hover{ color:var(--accent); background:var(--accent-soft); }

.polaris-empty{
  font-size:12.5px;
  color:var(--muted-2);
  padding:16px 18px;
  font-style:italic;
}

.polaris-hidden{ display:none !important; }

@media only screen and (min-width:768px) and (max-width:991px){
  /* Esta build de semantic.min.css (la misma que usa CENIT) no incluye el modulo de
     visibilidad de Fomantic (sin .tablet.hidden/.mobile.hidden nativos) — se implementa aca,
     acotado a este breakpoint, tal como lo usa el mockup original. */
  .ui.tablet.hidden{ display:none !important; }

  .polaris-left{ padding:22px 10px; align-items:center; }
  .polaris-brand{ justify-content:center; }
  .polaris-mascot-list{ align-items:center; }
  .polaris-right{ padding:30px 24px; }
  .polaris-data-grid{ grid-template-columns:repeat(2, 1fr); }
  .polaris-subcard{ gap:16px; }
}

@media only screen and (max-width:767px){
  .polaris-left{
    border-right:none;
    border-bottom:1px solid var(--border);
    min-height:0;
  }
  .polaris-right{ padding:26px 18px; min-height:0; }
  .polaris-data-grid{ grid-template-columns:repeat(2, 1fr); }
  .polaris-mascot-header{ align-items:center; }
  .polaris-mobile-back{ display:flex; }
}