/* =========================================================
   PETSKAN - HOJA DE ESTILOS DEPURADA
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  --color-primary: #2196f3;
  --color-primary-dark: #1976d2;
  --color-primary-deep: #0d47a1;
  --color-secondary: #ffa726;
  --color-background: #ffd634;
  --color-surface: #ffffff;
  --color-surface-soft: #fff8e1;
  --color-text: #333333;
  --color-muted: #777777;
  --color-border: #dddddd;
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-danger: #f44336;
  --color-neutral: #9e9e9e;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: Arial, sans-serif;
  text-align: center;
}

h1,
h2,
h3,
h4,
p {
  color: var(--color-text);
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* ---------- Botones ---------- */
button,
.boton,
.btn,
.btn-sec,
.btn-registrar {
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

button,
.boton,
.btn {
  background-color: var(--color-primary);
  color: #ffffff;
}

button {
  padding: 10px 20px;
  margin: 10px;
}

button:hover,
.boton:hover,
.btn:hover {
  background-color: var(--color-primary-dark);
}

.boton {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  font-weight: bold;
}

.btn,
.btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  font-weight: bold;
}

.btn-sec {
  background-color: #f1f1f1;
  color: var(--color-text);
}

.btn-sec:hover {
  background-color: #e0e0e0;
}

.btn-registrar {
  display: block;
  margin: 0 auto 20px;
  padding: 10px 20px;
  background-color: var(--color-success);
  color: #ffffff;
}

/* ---------- Contenedores ---------- */
.contenedor {
  width: min(95%, 520px);
  margin: 2em auto;
  padding: 2em;
  background: var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.contenedor_admin {
  width: 98%;
  max-width: 1800px;
  margin: 20px auto;
  padding: 20px;
}

.cuenta-contenedor {
  width: min(95%, 800px);
  margin: auto;
  padding: 2em;
  background: var(--color-surface-soft);
  border-radius: var(--radius-lg);
}

.main-content {
  padding: 0 20px;
}

.resultado {
  width: 100%;
  margin: 20px auto;
  padding: 18px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.tabla-scroll {
  width: 100%;
  overflow-x: auto;
}

/* ---------- Logo y encabezados ---------- */
.logo {
  display: block;
  width: min(100%, 400px);
  margin: 20px auto;
  text-align: center;
}

.logo h1 {
  margin: 10px 0 5px;
}

.cuenta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.email-info {
  margin-bottom: 20px;
  color: var(--color-text);
  text-align: center;
}

.bienvenida {
  margin-bottom: 20px;
  color: var(--color-text);
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}

/* ---------- Mensajes ---------- */
.error {
  margin-top: 20px;
  color: var(--color-danger);
  font-size: 18px;
  font-weight: bold;
}

.advertencia {
  margin-top: 20px;
  color: #444444;
  font-size: 18px;
  font-weight: bold;
}

.mensaje {
  margin: 15px 0;
  font-weight: bold;
}

.mensaje[hidden] {
    display: none !important;
}

/* ---------- Formularios ---------- */
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

.registro-formulario,
.formulario-login {
  width: min(95%, 400px);
  margin: 2rem auto;
  padding: 1rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.registro-formulario h2 {
  color: var(--color-text);
  text-align: center;
}

.registro-formulario input,
.registro-formulario select,
.registro-formulario textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.65rem;
  border: 1px solid #cccccc;
  border-radius: var(--radius-sm);
}

.registro-formulario button {
  width: 100%;
}

.formulario-login {
  max-width: 350px;
  margin-top: 50px;
  padding: 20px;
  border: 2px solid var(--color-background);
}

.formulario-login label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.formulario-login input {
  width: 80%;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: var(--radius-sm);
}

.formulario-login button {
  width: auto;
  min-width: 120px;
}

form#logoutForm {
  display: inline;
}

#logout {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  color: var(--color-text);
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* ---------- Tablas ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
}

table th,
table td {
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

table th {
  background-color: var(--color-primary-dark);
  color: #ffffff;
}

table tbody tr:hover {
  background-color: #f1f1f1;
}

/* ---------- Acciones ---------- */
.botones {
  margin-top: 25px;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

/* ---------- Tarjetas de placas ---------- */
.placas-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.placa-card {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 20px;
  padding: 15px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.placa-columna1 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 80px;
}

.placa-columna2 {
  display: flex;
  flex: 1;
  min-width: 100px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.placa-foto,
.placa-card img {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.placa-info {
  flex-grow: 1;
}

.placa-info h3 {
  margin: 0 0 5px;
}

.placa-nombre {
  margin: 0 0 8px;
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
}

.iconos,
.iconos-accion {
  display: flex;
  gap: 12px;
  align-items: center;
}

.iconos-accion {
  margin-left: auto;
}

.icono {
  color: var(--color-text);
  font-size: 1.5em;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.icono:hover {
  transform: scale(1.2);
  color: var(--color-primary);
}

.icono-editar {
  color: var(--color-primary-dark);
}

.icono-ver {
  color: var(--color-success);
}

.icono-ocultar {
  color: var(--color-neutral);
}

.icono-borrar {
  color: var(--color-danger);
}

.icono-alerta {
  color: var(--color-warning);
}

/* ---------- Carruseles ---------- */
.placas-carrusel,
.placas-carousel {
  display: flex;
  gap: 1em;
  overflow-x: auto;
  padding: 1em;
  scroll-snap-type: x mandatory;
}

.placa-item {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 240px;
  padding: 1em;
  background-color: var(--color-surface);
  border-radius: 1em;
  box-shadow: var(--shadow-sm);
  scroll-snap-align: center;
  text-align: center;
}

.placa-item img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.placa-acciones {
  display: flex;
  gap: 0.7em;
  justify-content: center;
  font-size: 1.4em;
}

.placa-acciones a {
  color: #007bff;
}

.placa-acciones a:hover {
  transform: scale(1.2);
}

/* ---------- Fotos de mascota y homenaje ---------- */
.foto-mascota {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 1em;
  border: 5px solid var(--color-primary);
  border-radius: 50%;
  object-fit: cover;
}

.foto-mascota-view {
  display: block;
  width: 100%;
  height: 100%;
  border: 5px solid var(--color-primary);
  border-radius: 50%;
  object-fit: cover;
}

.contenedor-foto {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 1.5em;
}

.foto-con-luto {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.overlay-luto,
.cinta-luto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  object-fit: contain;
  pointer-events: none;
}

.cinta-luto {
  z-index: 10;
}

.icono-homenaje,
.icono-homenaje-view {
  position: absolute;
  z-index: 10;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

.icono-homenaje {
  right: 25px;
  bottom: 25px;
  width: 50px;
  opacity: 1;
}

.icono-homenaje-view {
  right: 108px;
  bottom: 70px;
  width: 128px;
  opacity: 0.9;
}

/* ---------- Paginaciè´¸n ---------- */
.paginacion {
  margin-top: 30px;
  text-align: center;
}

.paginacion a {
  display: inline-block;
  min-width: 36px;
  margin: 0 4px;
  padding: 8px 14px;
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.paginacion a:hover {
  background-color: var(--color-primary-dark);
}

.pagina-activa {
  background-color: var(--color-primary-deep) !important;
  border: 2px solid #ffffff;
  font-weight: bold;
}

.paginacion .flecha {
  background-color: #1565c0;
  font-weight: bold;
}

.paginacion .flecha:hover {
  background-color: var(--color-primary-deep);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .contenedor {
    width: 94%;
    margin: 1em auto;
    padding: 1.2em;
  }

  .contenedor_admin {
    width: 100%;
    padding: 10px;
  }

  .cuenta-header,
  .placa-card {
    flex-direction: column;
  }

  .placa-card {
    text-align: center;
  }

  .placa-columna2 {
    align-items: center;
  }

  .iconos-accion {
    margin-left: 0;
  }

  table th,
  table td {
    padding: 8px;
    font-size: 14px;
  }

  .formulario-login input {
    width: 100%;
  }

}

/* =========================================================
   ZONA DEL CLIENTE - PANEL DE TARJETAS
   ========================================================= */

.zona-cliente {
  width: min(94%, 820px);
  max-width: 820px;
  padding: 30px;
}

.logo-zona-cliente {
  display: block;
  width: 300px;
  max-width: 88%;
  height: auto;
  margin: 0 auto 12px;
}

.zona-cliente .bienvenida {
  margin: 8px 0 6px;
  font-size: 1.45rem;
}

.bienvenida-texto {
  margin: 0 0 24px;
  text-align: center;
}

/* Cuadrícula principal */
.menu-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0 auto;
}

/* Tarjeta */
.menu-card,
.menu-card:link,
.menu-card:visited {
  display: flex;
  min-width: 0;
  min-height: 170px;
  padding: 20px 16px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.menu-card:hover,
.menu-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.18);
  outline: none;
}

.menu-card-icono {
  display: inline-flex;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  flex: 0 0 54px;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  font-size: 23px;
  line-height: 1;
}

.menu-card-icono i {
  color: inherit;
}

.menu-card-titulo {
  display: block;
  margin-bottom: 8px;
  color: #111111;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.menu-card-descripcion {
  display: block;
  color: #555555;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.45;
}

/* Tarjeta administrativa */
.menu-card-admin {
  background: #fff8e6;
}

.menu-card-admin .menu-card-icono {
  background: var(--color-secondary);
  color: #111111;
}

.menu-card-admin:hover,
.menu-card-admin:focus-visible {
  border-color: var(--color-secondary);
}

/* Tarjeta de acción peligrosa */
.menu-card-peligro {
  background: #fff5f5;
}

.menu-card-peligro .menu-card-icono {
  background: var(--color-danger);
}

.menu-card-peligro:hover,
.menu-card-peligro:focus-visible {
  border-color: var(--color-danger);
}

/* Botón inferior */
.zona-cliente-regresar {
  margin-top: 24px;
  text-align: center;
}

.boton-regresar,
.boton-regresar:link,
.boton-regresar:visited {
  display: inline-flex;
  min-width: 150px;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #666666;
  color: #ffffff;
}

.boton-regresar:hover,
.boton-regresar:focus-visible {
  background: #4f4f4f;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 650px) {
  .zona-cliente {
    width: 94%;
    margin: 1em auto;
    padding: 22px 16px;
  }

  .logo-zona-cliente {
    width: 260px;
  }

  .menu-cards {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .menu-card,
  .menu-card:link,
  .menu-card:visited {
    min-height: 0;
    padding: 18px 15px;
  }
}


/* =========================================================
   PANEL DE ADMINISTRADOR PETSKAN
   Agregar al final de css/estilos.css
   Compatible con Font Awesome 7.3.1 local.
   ========================================================= */

.admin-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg, #ff9f1c 0%, #ffb52e 48%, #ff9718 100%);
    color: #1f2937;
}

.admin-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 64px;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 26px;
    padding: 26px 30px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(74, 45, 0, .16);
    backdrop-filter: blur(8px);
}

.admin-logo {
    width: min(240px, 35vw);
    height: auto;
    object-fit: contain;
}

.admin-header h1,
.admin-section-heading h2 {
    margin: 0;
    color: #1f2937;
}

.admin-header h1 {
    font-size: clamp(1.7rem, 4vw, 2.55rem);
    line-height: 1.1;
}

.admin-subtitle {
    margin: 8px 0 0;
    color: #626b78;
    line-height: 1.5;
}

.admin-eyebrow {
    margin: 0 0 5px;
    color: #e27b00;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.admin-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 24px;
    padding: 15px 18px;
    background: #fff8e8;
    border: 1px solid #ffd58c;
    border-left: 5px solid #f59e0b;
    border-radius: 12px;
    color: #5b420e;
    box-shadow: 0 7px 20px rgba(74,45,0,.09);
}

.admin-summary-card,
.admin-result-card {
    margin-bottom: 30px;
    padding: 28px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(74,45,0,.15);
}

.admin-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.admin-section-heading h2 {
    font-size: 1.35rem;
}

.admin-heading-icon {
    font-size: 1.8rem;
    color: #2196f3;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.admin-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e6ebf1;
    border-radius: 14px;
}

.admin-stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e8f4ff;
    color: #1687e0;
    font-size: 1.15rem;
}

.admin-stat div {
    min-width: 0;
}

.admin-stat span:not(.admin-stat-icon) {
    display: block;
    color: #687180;
    font-size: .84rem;
    line-height: 1.25;
}

.admin-stat strong {
    display: block;
    margin-top: 4px;
    font-size: 1.35rem;
    color: #172033;
}

.admin-actions-section {
    margin-top: 34px;
}

.admin-actions-section > .admin-section-heading {
    padding: 0 4px;
}

.admin-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.admin-action-card {
    overflow: hidden;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 16px;
    box-shadow: 0 9px 26px rgba(74,45,0,.13);
}

.admin-action-wide {
    grid-column: 1 / -1;
}

.admin-action-card summary,
.admin-action-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-height: 108px;
    padding: 20px;
    border: 0;
    background: #fff;
    color: #1f2937;
    text-align: left;
    cursor: pointer;
    list-style: none;
    transition: background-color .18s ease, transform .18s ease;
}

.admin-action-card summary::-webkit-details-marker {
    display: none;
}

.admin-action-card summary:hover,
.admin-action-button:hover {
    background: #fff9ef;
}

.admin-action-button {
    font: inherit;
}

.admin-action-icon {
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: linear-gradient(135deg, #269cf1, #147fda);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 7px 16px rgba(33,150,243,.28);
}

.admin-action-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.admin-action-copy strong {
    font-size: 1rem;
    line-height: 1.25;
}

.admin-action-copy small {
    color: #6b7280;
    font-size: .84rem;
    line-height: 1.4;
}

.admin-chevron,
.admin-action-arrow {
    margin-left: auto;
    color: #929aa5;
    transition: transform .2s ease;
}

.admin-action-card[open] .admin-chevron {
    transform: rotate(180deg);
}

.admin-form-panel {
    padding: 0 20px 22px;
    border-top: 1px solid #edf0f3;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-top: 18px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-form-grid > div {
    min-width: 0;
}

.admin-form label {
    display: block;
    margin: 0 0 6px;
    color: #374151;
    font-size: .88rem;
    font-weight: 700;
    text-align: left;
}

.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-payment-form input {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #ccd3dc;
    border-radius: 9px;
    background: #fff;
    color: #1f2937;
    font: inherit;
}

.admin-form textarea {
    min-height: 100px;
    resize: vertical;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus,
.admin-payment-form input:focus {
    outline: 3px solid rgba(33,150,243,.16);
    border-color: #2196f3;
}

.admin-submit,
.admin-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 170px;
    min-height: 44px;
    margin: 4px 0 0;
    padding: 11px 18px;
}

.admin-footer-actions {
    display: flex;
    justify-content: center;
    margin: 28px 0 34px;
}

.admin-back {
    text-decoration: none;
}

.admin-result-card {
    margin-top: 28px;
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-detail-grid p {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;
    background: #f8fafc;
    border: 1px solid #e8edf2;
    border-radius: 10px;
}

.admin-detail-grid strong {
    color: #667080;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.admin-detail-grid span,
.admin-detail-grid a {
    overflow-wrap: anywhere;
}

.admin-detail-wide {
    grid-column: 1 / -1;
}

.admin-qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 22px;
}

.admin-qr-box img {
    width: min(220px, 70vw);
    height: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #e1e6eb;
    border-radius: 12px;
}

.admin-table-wrap {
    overflow-x: auto;
    margin-top: 24px;
}

.admin-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #fff;
}

.admin-table th,
.admin-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e4e8ed;
    text-align: left;
    white-space: nowrap;
}

.admin-table thead th {
    background: #f1f5f9;
    color: #374151;
    font-size: .85rem;
}

.admin-table tfoot th,
.admin-table tfoot td {
    background: #fff8e8;
    font-weight: 800;
}

.admin-empty {
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    color: #6b7280;
    text-align: center;
}

.admin-payment-list {
    margin-top: 22px;
    padding: 17px 20px;
    background: #f8fafc;
    border-radius: 12px;
}

.admin-payment-list ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.admin-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-top: 22px;
}

.admin-inline-actions form {
    margin: 0;
}

.admin-payment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.admin-payment-form input {
    flex: 1 1 230px;
}

.admin-paid {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #177245;
    font-weight: 700;
}

.admin-partner-include {
    padding: 20px;
}

@media (max-width: 900px) {
    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-shell {
        width: min(100% - 22px, 620px);
        padding-top: 18px;
    }

    .admin-header {
        flex-direction: column;
        gap: 16px;
        padding: 22px 18px;
        text-align: center;
    }

    .admin-logo {
        width: min(220px, 70vw);
    }

    .admin-actions-grid,
    .admin-form-grid,
    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-action-wide,
    .admin-detail-wide {
        grid-column: auto;
    }

    .admin-summary-card,
    .admin-result-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .admin-action-card summary,
    .admin-action-button {
        min-height: 96px;
        padding: 17px 15px;
    }

    .admin-action-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .admin-form-panel {
        padding: 0 15px 18px;
    }

    .admin-submit,
    .admin-back {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat {
        padding: 15px;
    }

    .admin-action-copy small {
        display: none;
    }

    .admin-section-heading {
        align-items: flex-start;
    }
}

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

.admin-field-help {
    display: block;
    margin-top: 6px;
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.4;
}

@media (max-width: 700px) {
    .admin-form-full {
        grid-column: auto;
    }
}

/* =========================================================
   PANEL DE CUENTA PETSKAN
   Agregar al final de css/estilos.css
   Compatible con Font Awesome 7.3.1 local
   ========================================================= */

.cuenta-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.32), transparent 28%),
        linear-gradient(135deg, #ffd942 0%, #ffcd32 46%, #ffb120 100%);
    color: #1f2937;
}

.cuenta-shell {
    width: min(920px, calc(100% - 30px));
    margin: 0 auto;
    padding: 28px 0 54px;
}

.cuenta-header {
    padding: 28px;
    background: linear-gradient(145deg, #ffad2d, #ff9f1c);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 16px 40px rgba(119,72,0,.18);
    text-align: center;
}

.cuenta-logo {
    display: block;
    width: min(330px, 82%);
    height: auto;
    margin: 0 auto 18px;
}

.cuenta-bienvenida p {
    margin: 0 0 4px;
    color: rgba(31,41,55,.72);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cuenta-bienvenida h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
}

.cuenta-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    max-width: 700px;
    margin: 24px auto 0;
}

.cuenta-nav-btn,
.cuenta-nav-btn:link,
.cuenta-nav-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 16px;
    background: #2196f3;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 7px 17px rgba(20,113,190,.25);
    font-size: .94rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.cuenta-nav-btn i { font-size: 1.18rem; }
.cuenta-nav-btn:hover { transform: translateY(-2px); background: #1687df; }
.cuenta-nav-salir { background: #177fd0; }

.cuenta-contenido {
    padding: 30px;
    background: rgba(255,255,255,.97);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 16px 40px rgba(119,72,0,.18);
}

.cuenta-seccion-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.cuenta-seccion-encabezado h2 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.25rem, 4vw, 1.7rem);
}

.cuenta-eyebrow {
    margin: 0 0 5px;
    color: #e27a00;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cuenta-total {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: #fff3dc;
    color: #d66d00;
    border: 1px solid #ffd291;
    border-radius: 999px;
    font-weight: 800;
}

.mascotas-lista { display: flex; flex-direction: column; gap: 17px; }

.mascota-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 19px 20px;
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(31,41,55,.09);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mascota-card:hover {
    transform: translateY(-2px);
    border-color: #c9e4fb;
    box-shadow: 0 12px 27px rgba(31,41,55,.13);
}

.mascota-identidad { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mascota-foto-wrap { position: relative; flex: 0 0 84px; width: 84px; height: 84px; }

.mascota-foto {
    box-sizing: border-box;
    width: 84px;
    height: 84px;
    object-fit: cover;
    border: 4px solid #2196f3;
    border-radius: 50%;
    background: #f5f7fa;
    box-shadow: 0 5px 14px rgba(33,150,243,.2);
}

.mascota-homenaje {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.mascota-info { min-width: 0; }
.mascota-titulo-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.mascota-titulo-fila h3 {
    overflow: hidden;
    margin: 0;
    color: #172033;
    font-size: 1.22rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mascota-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 800;
    white-space: nowrap;
}

.mascota-estado-registrado {
    background: #e7f8ef;
    color: #147948;
}

.mascota-estado-perdido {
    background: #fff0f0;
    color: #c62828;
    border: 1px solid #ffcaca;
}

.mascota-estado-homenaje {
    background: #f4ebff;
    color: #7136a8;
    border: 1px solid #ddc6f4;
}
.mascota-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 10px;
    color: #687180;
    font-size: .83rem;
}

.mascota-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mascota-meta i { color: #2196f3; }

.mascota-acciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(105px,1fr));
    gap: 9px;
}

.mascota-accion,
.mascota-accion:link,
.mascota-accion:visited {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-height: 42px;
    padding: 8px 12px;
    background: #f2f8fd;
    color: #136fae;
    border: 1px solid #d6eafa;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.mascota-accion i {
    display: grid;
    place-items: center;
    width: 22px;
    font-size: 1.12rem;
}

.mascota-accion:hover { transform: translateY(-1px); background: #2196f3; color: #fff; }
.mascota-accion-eliminar { background: #fff3f3; color: #bd2d2d; border-color: #ffd5d5; }
.mascota-accion-eliminar:hover { background: #d93636; color: #fff; }

.cuenta-paginacion {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 27px;
}

.cuenta-pagina,
.cuenta-pagina:link,
.cuenta-pagina:visited {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 7px;
    background: #eef6fc;
    color: #176fae;
    border: 1px solid #d5e8f7;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
}

.cuenta-pagina-activa { background: #176fc0 !important; color: #fff !important; border-color: #176fc0 !important; }
.cuenta-pagina-flecha { background: #2196f3; color: #fff; border-color: #2196f3; }

.cuenta-vacio {
    padding: 42px 24px;
    background: #f8fafc;
    border: 1px dashed #cbd5df;
    border-radius: 17px;
    text-align: center;
}

.cuenta-vacio-icono {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    background: #e8f4ff;
    color: #2196f3;
    border-radius: 50%;
    font-size: 2rem;
}

.cuenta-vacio h3 { margin: 0 0 8px; }
.cuenta-vacio p { max-width: 460px; margin: 0 auto 20px; color: #6b7280; line-height: 1.55; }

.cuenta-vacio-btn,
.cuenta-vacio-btn:link,
.cuenta-vacio-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 18px;
    background: #2196f3;
    color: #fff;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 760px) {
    .cuenta-shell { width: min(100% - 20px, 620px); padding-top: 14px; }
    .cuenta-header { padding: 23px 17px; border-radius: 19px 19px 0 0; }
    .cuenta-contenido { padding: 22px 16px; border-radius: 0 0 19px 19px; }
    .cuenta-nav { grid-template-columns: 1fr; max-width: 420px; }
    .cuenta-nav-btn { justify-content: flex-start; padding-left: 24px; }
    .mascota-card { grid-template-columns: 1fr; gap: 17px; padding: 17px; }
    .mascota-acciones { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 470px) {
    .cuenta-seccion-encabezado { align-items: flex-start; }
    .mascota-identidad { align-items: flex-start; gap: 13px; }
    .mascota-foto-wrap, .mascota-foto { width: 70px; height: 70px; }
    .mascota-foto-wrap { flex-basis: 70px; }
    .mascota-homenaje { width: 29px; height: 29px; }
    .mascota-titulo-fila { align-items: flex-start; flex-direction: column; gap: 7px; }
    .mascota-titulo-fila h3 { max-width: 100%; font-size: 1.08rem; }
    .mascota-meta { flex-direction: column; gap: 5px; }
    .mascota-accion { justify-content: center; min-width: 0; padding: 8px; }
    .mascota-accion span { font-size: .76rem; }
}

/* =========================================================
   EDITAR CLIENTE - PETSKAN
   Agregar al final de css/estilos.css
   Compatible con Font Awesome 7.3.1 local
   ========================================================= */

.cliente-edit-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .30), transparent 30%),
        linear-gradient(135deg, #ffd942 0%, #ffcb30 50%, #ffb01e 100%);
    color: #1f2937;
}

.cliente-edit-shell {
    width: min(860px, calc(100% - 28px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.cliente-edit-header {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 16px 40px rgba(119, 72, 0, .17);
}

.cliente-edit-logo {
    flex: 0 0 auto;
    width: min(280px, 38%);
    height: auto;
}

.cliente-edit-header h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.65rem, 4vw, 2.3rem);
    line-height: 1.14;
}

.cliente-edit-subtitulo {
    max-width: 500px;
    margin: 9px 0 0;
    color: rgba(31, 41, 55, .72);
    font-size: .94rem;
    line-height: 1.55;
}

.cliente-edit-eyebrow {
    margin: 0 0 5px;
    color: #bf6500;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cliente-edit-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 18px 0 0;
    padding: 15px 17px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(57, 65, 78, .10);
    font-weight: 700;
}

.cliente-edit-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.cliente-edit-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}

.cliente-edit-alert-info {
    background: #edf6ff;
    color: #17679d;
    border: 1px solid #c8e3f8;
    border-left: 5px solid #2196f3;
}

.cliente-edit-card {
    padding: 30px;
    background: rgba(255, 255, 255, .98);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 16px 40px rgba(119, 72, 0, .17);
}

.cliente-edit-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.cliente-edit-card-header h2 {
    margin: 0;
    color: #172033;
    font-size: 1.35rem;
}

.cliente-edit-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    background: #e8f4ff;
    color: #1684d7;
    border-radius: 13px;
    font-size: 1.35rem;
}

.cliente-edit-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cliente-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.cliente-edit-phone-grid {
    display: grid;
    grid-template-columns: minmax(185px, .7fr) minmax(0, 1.3fr);
    gap: 17px;
}

.cliente-edit-field {
    min-width: 0;
}

.cliente-edit-field label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    color: #374151;
    font-size: .86rem;
    font-weight: 800;
}

.cliente-edit-field label i {
    color: #2196f3;
}

.cliente-edit-field input,
.cliente-edit-field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 11px 13px;
    background: #fff;
    color: #1f2937;
    border: 1px solid #cbd4de;
    border-radius: 10px;
    font: inherit;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.cliente-edit-field input:hover,
.cliente-edit-field select:hover {
    border-color: #9fc7e7;
}

.cliente-edit-field input:focus,
.cliente-edit-field select:focus {
    outline: none;
    border-color: #2196f3;
    background: #fbfdff;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .14);
}

.cliente-edit-separador {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 3px;
    color: #176fae;
    font-size: .88rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.cliente-edit-separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dbe7f1;
}

.cliente-edit-separador span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cliente-edit-separador-whatsapp {
    color: #198b51;
}

.cliente-edit-ayuda {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 13px 15px;
    background: #f8fafc;
    color: #69727e;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.5;
}

.cliente-edit-ayuda i {
    margin-top: 2px;
    color: #2196f3;
}

.cliente-edit-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 5px;
}

.cliente-edit-btn,
.cliente-edit-btn:link,
.cliente-edit-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 170px;
    min-height: 48px;
    padding: 11px 19px;
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-size: .9rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.cliente-edit-btn:hover {
    transform: translateY(-2px);
}

.cliente-edit-btn-principal {
    background: #2196f3;
    color: #fff;
    box-shadow: 0 7px 18px rgba(33, 150, 243, .28);
}

.cliente-edit-btn-principal:hover {
    background: #1686dd;
    box-shadow: 0 10px 23px rgba(33, 150, 243, .34);
}

.cliente-edit-btn-secundario {
    background: #edf3f8;
    color: #36536a;
    border: 1px solid #d5e0e9;
}

.cliente-edit-btn-secundario:hover {
    background: #e1ebf3;
}

@media (max-width: 720px) {
    .cliente-edit-shell {
        width: min(100% - 20px, 620px);
        padding-top: 14px;
    }

    .cliente-edit-header {
        flex-direction: column;
        gap: 18px;
        padding: 23px 18px;
        text-align: center;
        border-radius: 19px 19px 0 0;
    }

    .cliente-edit-logo {
        width: min(280px, 78%);
    }

    .cliente-edit-card {
        padding: 23px 17px;
        border-radius: 0 0 19px 19px;
    }

    .cliente-edit-grid,
    .cliente-edit-phone-grid {
        grid-template-columns: 1fr;
    }

    .cliente-edit-actions {
        flex-direction: column-reverse;
    }

    .cliente-edit-btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .cliente-edit-card-header {
        align-items: flex-start;
    }

    .cliente-edit-card-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }

    .cliente-edit-subtitulo {
        font-size: .88rem;
    }
}

/* =========================================================
   RECUPERAR CONTRASEÑA - PETSKAN
   Página: forget.php
   Permite solicitar un enlace seguro para restablecer la
   contraseña mediante el correo registrado en la cuenta.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.forget-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.forget-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.forget-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE RECUPERACIÓN
   --------------------------------------------------------- */

.forget-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0 -32px;
    padding: 30px 34px 28px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    text-align: center;
}

.forget-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.forget-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .86);
    color: #17679d;
    border-radius: 50%;
    font-size: 1.35rem;
    box-shadow: 0 7px 18px rgba(73, 49, 15, .15);
}

.forget-eyebrow {
    margin: 0 0 7px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.forget-header h1 {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.forget-subtitle {
    max-width: 500px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.forget-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.forget-alert i {
    margin-top: 2px;
}

.forget-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.forget-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}


/* ---------------------------------------------------------
   5. FORMULARIO DE RECUPERACIÓN
   --------------------------------------------------------- */

.forget-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.forget-field {
    display: grid;
    gap: 8px;
}

.forget-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #324150;
    font-size: .82rem;
    font-weight: 900;
}

.forget-field label i {
    color: #2196f3;
}

.forget-input-wrap {
    position: relative;
}

.forget-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #7b8793;
    font-size: .88rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.forget-input-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 12px 15px 12px 43px;
    background: #ffffff;
    color: #243243;
    border: 1px solid #ccd7df;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.forget-input-wrap input::placeholder {
    color: #9aa5af;
}

.forget-input-wrap input:hover {
    border-color: #aebdca;
}

.forget-input-wrap input:focus {
    background: #fbfdff;
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .14);
}


/* ---------------------------------------------------------
   6. INFORMACIÓN SOBRE LA VIGENCIA DEL ENLACE
   --------------------------------------------------------- */

.forget-help {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 14px 15px;
    background: #fff7df;
    color: #805e0c;
    border: 1px solid #ecd88a;
    border-radius: 12px;
    font-size: .79rem;
    line-height: 1.5;
}

.forget-help i {
    margin-top: 3px;
}


/* ---------------------------------------------------------
   7. SEPARADOR ENTRE ACCIONES
   --------------------------------------------------------- */

.forget-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 21px 0;
}

.forget-divider::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: #dfe6ec;
}

.forget-divider span {
    position: relative;
    z-index: 1;
    padding: 0 11px;
    background: #ffffff;
    color: #8a949e;
    font-size: .73rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   8. CONTENEDOR DE ACCIONES
   --------------------------------------------------------- */

.forget-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
}

.forget-actions-centered {
    margin-top: 22px;
    justify-items: center;
}

.forget-actions-centered .forget-btn {
    max-width: 340px;
}


/* ---------------------------------------------------------
   9. BOTONES
   --------------------------------------------------------- */

.forget-btn,
.forget-btn:link,
.forget-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.forget-btn:hover {
    transform: translateY(-2px);
}

.forget-btn-primary {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.forget-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.forget-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.forget-btn-secondary:hover {
    background: #e1ebf2;
}


/* ---------------------------------------------------------
   10. ENLACE PARA REGISTRO
   --------------------------------------------------------- */

.forget-link,
.forget-link:link,
.forget-link:visited {
    display: inline-flex;
    justify-content: center;
    margin-top: 13px;
    color: #17679d;
    font-size: .80rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.forget-link:hover {
    color: #0f507c;
    text-decoration: underline;
}


/* ---------------------------------------------------------
   11. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .forget-shell {
        padding: 16px 10px;
    }

    .forget-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .forget-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
    }

    .forget-logo {
        width: 205px;
    }

    .forget-header h1 {
        font-size: clamp(27px, 8vw, 34px);
    }
}


/* ---------------------------------------------------------
   12. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .forget-header {
        padding: 22px 16px;
    }

    .forget-logo {
        width: 185px;
    }

    .forget-header h1 {
        font-size: 27px;
    }

    .forget-subtitle {
        font-size: 13px;
    }

    .forget-actions-centered .forget-btn {
        max-width: none;
    }
}


/* =========================================================
   ESTABLECER NUEVA CONTRASEÑA - PETSKAN
   Agregar al final de css/estilos.css
   Compatible con Font Awesome 7.3.1 local
   ========================================================= */

.reset-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(135deg, #ffda43 0%, #ffca30 52%, #ffb01e 100%);
    color: #1f2937;
}

.reset-shell {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 28px 14px;
}

.reset-card {
    box-sizing: border-box;
    width: min(570px, 100%);
    padding: 34px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(111,68,0,.2);
}

.reset-header {
    text-align: center;
}

.reset-logo {
    display: block;
    width: min(290px, 84%);
    height: auto;
    margin: 0 auto 22px;
}

.reset-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 15px;
    background: #e8f4ff;
    color: #1685dc;
    border-radius: 17px;
    font-size: 1.55rem;
    box-shadow: 0 8px 18px rgba(33,150,243,.16);
}

.reset-eyebrow {
    margin: 0 0 6px;
    color: #d56f00;
    font-size: .77rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.reset-header h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.55rem, 5vw, 2.15rem);
    line-height: 1.16;
}

.reset-subtitle {
    max-width: 450px;
    margin: 12px auto 0;
    color: #66707d;
    font-size: .93rem;
    line-height: 1.58;
}

.reset-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 28px;
}

.reset-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #374151;
    font-size: .88rem;
    font-weight: 800;
}

.reset-field label i {
    color: #2196f3;
}

.reset-password-wrap {
    position: relative;
}

.reset-password-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 52px 12px 14px;
    background: #fff;
    color: #1f2937;
    border: 1px solid #cad4de;
    border-radius: 11px;
    font: inherit;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.reset-password-wrap input:hover {
    border-color: #9cc7e8;
}

.reset-password-wrap input:focus {
    outline: none;
    border-color: #2196f3;
    background: #fbfdff;
    box-shadow: 0 0 0 4px rgba(33,150,243,.14);
}

.reset-toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    color: #6f7a86;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transform: translateY(-50%);
}

.reset-toggle-password:hover {
    background: #eef6fc;
    color: #1778ba;
}

.reset-requisitos {
    padding: 14px 16px;
    background: #f7fafc;
    color: #68727f;
    border: 1px solid #e3e9ef;
    border-radius: 11px;
    font-size: .82rem;
    line-height: 1.5;
}

.reset-requisitos p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 7px;
    color: #43505e;
    font-weight: 800;
}

.reset-requisitos p i {
    color: #2196f3;
}

.reset-requisitos ul {
    margin: 0;
    padding-left: 22px;
}

.reset-btn,
.reset-btn:link,
.reset-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 20px;
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-size: .9rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.reset-btn:hover {
    transform: translateY(-2px);
}

.reset-btn-primary {
    width: 100%;
    background: #2196f3;
    color: #fff;
    box-shadow: 0 8px 20px rgba(33,150,243,.28);
}

.reset-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 25px rgba(33,150,243,.34);
}

.reset-btn-secondary {
    width: 100%;
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d4e0e9;
}

.reset-btn-secondary:hover {
    background: #e2ebf2;
}

.reset-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 25px;
    padding: 15px 17px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
}

.reset-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.reset-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}

.reset-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 560px) {
    .reset-shell {
        align-items: start;
        padding-top: 14px;
    }

    .reset-card {
        padding: 27px 18px;
        border-radius: 20px;
    }

    .reset-logo {
        width: min(270px, 88%);
    }
}

/* =========================================================
   INICIO DE SESIÓN - PETSKAN
   Página: login.php
   Permite el acceso seguro a la cuenta mediante correo y
   contraseña, con opción para mostrar la clave, recordar
   la sesión y acceder a recuperación o registro.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.login-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.login-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.login-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
    padding: 0 32px 30px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA NARANJA DE INICIO DE SESIÓN
   --------------------------------------------------------- */

.login-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0 -32px;
    padding: 30px 34px 28px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    text-align: center;
}

.login-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.login-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .86);
    color: #17679d;
    border-radius: 50%;
    font-size: 1.35rem;
    box-shadow: 0 7px 18px rgba(73, 49, 15, .15);
}

.login-eyebrow {
    margin: 0 0 7px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.login-header h1 {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.login-subtitle {
    max-width: 500px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.login-alert i {
    margin-top: 2px;
}

.login-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}

.login-alert-info {
    background: #eaf5fc;
    color: #246d96;
    border: 1px solid #c7dfef;
    border-left: 5px solid #238bc4;
}


/* ---------------------------------------------------------
   5. FORMULARIO DE INICIO DE SESIÓN
   --------------------------------------------------------- */

.login-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.login-field {
    display: grid;
    gap: 8px;
}

.login-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #324150;
    font-size: .82rem;
    font-weight: 900;
}

.login-field label i {
    color: #2196f3;
}


/* ---------------------------------------------------------
   6. CAMPO DE CORREO ELECTRÓNICO
   --------------------------------------------------------- */

.login-input-wrap {
    position: relative;
}

.login-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #7b8793;
    font-size: .88rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.login-input-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 12px 15px 12px 43px;
    background: #ffffff;
    color: #243243;
    border: 1px solid #ccd7df;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.login-input-wrap input::placeholder {
    color: #9aa5af;
}

.login-input-wrap input:hover {
    border-color: #aebdca;
}

.login-input-wrap input:focus {
    background: #fbfdff;
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .14);
}


/* ---------------------------------------------------------
   7. CAMPO DE CONTRASEÑA Y BOTÓN DE VISIBILIDAD
   --------------------------------------------------------- */

.login-password-wrap {
    position: relative;
}

.login-password-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 12px 50px 12px 15px;
    background: #ffffff;
    color: #243243;
    border: 1px solid #ccd7df;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.login-password-wrap input::placeholder {
    color: #9aa5af;
}

.login-password-wrap input:hover {
    border-color: #aebdca;
}

.login-password-wrap input:focus {
    background: #fbfdff;
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .14);
}

.login-toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    color: #71808c;
    border: 0;
    border-radius: 9px;
    font-size: .94rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color .18s ease,
        color .18s ease;
}

.login-toggle-password:hover {
    background: #edf4f8;
    color: #17679d;
}

.login-toggle-password:focus-visible {
    outline: 3px solid rgba(33, 150, 243, .25);
    outline-offset: 1px;
}


/* ---------------------------------------------------------
   8. OPCIONES DEL FORMULARIO
   Recordarme y recuperación de contraseña.
   --------------------------------------------------------- */

.login-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: -2px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #596874;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.login-remember input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #2196f3;
    cursor: pointer;
}

.login-forgot-link,
.login-forgot-link:link,
.login-forgot-link:visited {
    color: #17679d;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.login-forgot-link:hover {
    color: #0f507c;
    text-decoration: underline;
}


/* ---------------------------------------------------------
   9. SEPARADOR ENTRE INGRESO Y REGISTRO
   --------------------------------------------------------- */

.login-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 22px 0;
}

.login-divider::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: #dfe6ec;
}

.login-divider span {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    background: #ffffff;
    color: #87939d;
    font-size: .74rem;
    font-weight: 800;
}


/* ---------------------------------------------------------
   10. BOTONES PRINCIPAL Y SECUNDARIO
   --------------------------------------------------------- */

.login-btn,
.login-btn:link,
.login-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
}

.login-btn-primary {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.login-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.login-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.login-btn-secondary:hover {
    background: #e1ebf2;
}


/* ---------------------------------------------------------
   11. MENSAJE DE SEGURIDAD
   --------------------------------------------------------- */

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    color: #7a8791;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.login-security i {
    color: #25a765;
}


/* ---------------------------------------------------------
   12. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .login-shell {
        padding: 16px 10px;
    }

    .login-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .login-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
    }

    .login-logo {
        width: 205px;
    }

    .login-header h1 {
        font-size: clamp(27px, 8vw, 34px);
    }
}


/* ---------------------------------------------------------
   13. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .login-header {
        padding: 22px 16px;
    }

    .login-logo {
        width: 185px;
    }

    .login-header h1 {
        font-size: 27px;
    }

    .login-subtitle {
        font-size: 13px;
    }

    .login-form-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* =========================================================
   RECUPERAR CÓDIGO DE ACTIVACIÓN - PETSKAN
   Página: recuperar_codigo.php
   Permite solicitar nuevamente el código de activación de
   una placa disponible mediante su ID y correo registrado.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.codigo-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.codigo-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.codigo-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE RECUPERACIÓN
   --------------------------------------------------------- */

.codigo-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0 -32px;
    padding: 30px 34px 28px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    text-align: center;
}

.codigo-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.codigo-icono {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .86);
    color: #17679d;
    border-radius: 50%;
    font-size: 1.35rem;
    box-shadow: 0 7px 18px rgba(73, 49, 15, .15);
}

.codigo-eyebrow {
    margin: 0 0 7px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.codigo-header h1 {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.codigo-subtitulo {
    max-width: 500px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.codigo-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.codigo-alert i {
    margin-top: 2px;
}

.codigo-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.codigo-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}


/* ---------------------------------------------------------
   5. FORMULARIO DE RECUPERACIÓN
   --------------------------------------------------------- */

.codigo-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.codigo-field {
    display: grid;
    gap: 8px;
}

.codigo-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #324150;
    font-size: .82rem;
    font-weight: 900;
}

.codigo-field label i {
    color: #2196f3;
}

.codigo-input-wrap {
    position: relative;
}

.codigo-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #7b8793;
    font-size: .88rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.codigo-input-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 12px 15px 12px 43px;
    background: #ffffff;
    color: #243243;
    border: 1px solid #ccd7df;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.codigo-input-wrap input::placeholder {
    color: #9aa5af;
}

.codigo-input-wrap input:hover {
    border-color: #aebdca;
}

.codigo-input-wrap input:focus {
    background: #fbfdff;
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .14);
}


/* ---------------------------------------------------------
   6. TEXTO DE AYUDA
   --------------------------------------------------------- */

.codigo-ayuda {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 14px 15px;
    background: #fff7df;
    color: #805e0c;
    border: 1px solid #ecd88a;
    border-radius: 12px;
    font-size: .79rem;
    line-height: 1.5;
}

.codigo-ayuda i {
    margin-top: 3px;
}


/* ---------------------------------------------------------
   7. SEPARADOR ENTRE ACCIONES
   --------------------------------------------------------- */

.codigo-divisor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 21px 0;
}

.codigo-divisor::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: #dfe6ec;
}

.codigo-divisor span {
    position: relative;
    z-index: 1;
    padding: 0 11px;
    background: #ffffff;
    color: #8a949e;
    font-size: .73rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   8. ACCIONES DESPUÉS DE RECUPERAR EL CÓDIGO
   --------------------------------------------------------- */

.codigo-acciones-exito {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 22px;
}


/* ---------------------------------------------------------
   9. BOTONES
   --------------------------------------------------------- */

.codigo-btn,
.codigo-btn:link,
.codigo-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.codigo-btn:hover {
    transform: translateY(-2px);
}

.codigo-btn-principal {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.codigo-btn-principal:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.codigo-btn-secundario {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.codigo-btn-secundario:hover {
    background: #e1ebf2;
}


/* ---------------------------------------------------------
   10. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .codigo-shell {
        padding: 16px 10px;
    }

    .codigo-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .codigo-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
    }

    .codigo-logo {
        width: 205px;
    }

    .codigo-header h1 {
        font-size: clamp(27px, 8vw, 34px);
    }

    .codigo-acciones-exito {
        grid-template-columns: 1fr;
    }

    .codigo-acciones-exito .codigo-btn-principal {
        order: -1;
    }
}


/* ---------------------------------------------------------
   11. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .codigo-header {
        padding: 22px 16px;
    }

    .codigo-logo {
        width: 185px;
    }

    .codigo-header h1 {
        font-size: 27px;
    }

    .codigo-subtitulo {
        font-size: 13px;
    }
}


/* =========================================================
   TRANSFERIR DOMINIO DIGITAL - PETSKAN
   Página: transferir_dominio.php
   Permite iniciar la transferencia de propiedad digital de
   una placa activa vinculada a la cuenta del usuario.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.transfer-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.transfer-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.transfer-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE TRANSFERENCIA
   --------------------------------------------------------- */

.transfer-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0 -32px;
    padding: 30px 34px 28px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    text-align: center;
}

.transfer-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.transfer-icono {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .86);
    color: #17679d;
    border-radius: 50%;
    font-size: 1.35rem;
    box-shadow: 0 7px 18px rgba(73, 49, 15, .15);
}

.transfer-eyebrow {
    margin: 0 0 7px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.transfer-header h1 {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.transfer-subtitulo {
    max-width: 500px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.transfer-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.transfer-alert i {
    margin-top: 2px;
}

.transfer-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.transfer-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}


/* ---------------------------------------------------------
   5. FORMULARIO DE TRANSFERENCIA
   --------------------------------------------------------- */

.transfer-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.transfer-field {
    display: grid;
    gap: 8px;
}

.transfer-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #324150;
    font-size: .82rem;
    font-weight: 900;
}

.transfer-field label i {
    color: #2196f3;
}

.transfer-select-wrap {
    position: relative;
}

.transfer-select-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #7b8793;
    font-size: .88rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.transfer-select-wrap select {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 12px 43px 12px 43px;
    background: #ffffff;
    color: #243243;
    border: 1px solid #ccd7df;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.transfer-select-wrap::after {
    content: "078";
    position: absolute;
    top: 50%;
    right: 15px;
    color: #7b8793;
    font-family: "Font Awesome 7 Free";
    font-size: .78rem;
    font-weight: 900;
    transform: translateY(-50%);
    pointer-events: none;
}

.transfer-select-wrap select:hover {
    border-color: #aebdca;
}

.transfer-select-wrap select:focus {
    background: #fbfdff;
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .14);
}


/* ---------------------------------------------------------
   6. AVISO PREVIO A LA TRANSFERENCIA
   --------------------------------------------------------- */

.transfer-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: #fff7df;
    color: #805e0c;
    border: 1px solid #ecd88a;
    border-radius: 12px;
}

.transfer-notice > i {
    margin-top: 3px;
}

.transfer-notice > div {
    min-width: 0;
}

.transfer-notice strong {
    display: block;
    color: #6d500b;
    font-size: .84rem;
}

.transfer-notice p {
    margin: 5px 0 0;
    font-size: .79rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   7. SEPARADOR ENTRE ACCIONES
   --------------------------------------------------------- */

.transfer-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 21px 0;
}

.transfer-divider::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: #dfe6ec;
}

.transfer-divider span {
    position: relative;
    z-index: 1;
    padding: 0 11px;
    background: #ffffff;
    color: #8a949e;
    font-size: .73rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   8. SOLICITUD ENVIADA CORRECTAMENTE
   --------------------------------------------------------- */

.transfer-success-box {
    margin-top: 22px;
    padding: 29px 22px;
    background: #eefaf3;
    border: 1px solid #bce8cf;
    border-radius: 16px;
    text-align: center;
}

.transfer-success-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #dff5e8;
    color: #198754;
    border-radius: 50%;
    font-size: 1.45rem;
}

.transfer-success-box h2 {
    margin: 0;
    color: #1d5f3d;
    font-size: 1.16rem;
}

.transfer-success-box p {
    max-width: 480px;
    margin: 10px auto 0;
    color: #52705f;
    font-size: .83rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   9. ESTADO SIN PLACAS DISPONIBLES
   --------------------------------------------------------- */

.transfer-empty {
    margin-top: 22px;
    padding: 30px 22px;
    background: #f8fafc;
    border: 1px dashed #cdd8e1;
    border-radius: 16px;
    text-align: center;
}

.transfer-empty-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #eaf4ff;
    color: #2196f3;
    border-radius: 50%;
    font-size: 1.35rem;
}

.transfer-empty h2 {
    margin: 0;
    color: #263444;
    font-size: 1.15rem;
}

.transfer-empty p {
    max-width: 440px;
    margin: 9px auto 0;
    color: #697684;
    font-size: .84rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   10. BOTONES Y ACCIONES
   --------------------------------------------------------- */

.transfer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    margin-top: 22px;
}

.transfer-btn,
.transfer-btn:link,
.transfer-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.transfer-btn:hover {
    transform: translateY(-2px);
}

.transfer-btn-primary {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.transfer-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.transfer-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.transfer-btn-secondary:hover {
    background: #e1ebf2;
}


/* ---------------------------------------------------------
   11. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .transfer-shell {
        padding: 16px 10px;
    }

    .transfer-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .transfer-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
    }

    .transfer-logo {
        width: 205px;
    }

    .transfer-header h1 {
        font-size: clamp(27px, 8vw, 34px);
    }
}


/* ---------------------------------------------------------
   12. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .transfer-header {
        padding: 22px 16px;
    }

    .transfer-logo {
        width: 185px;
    }

    .transfer-header h1 {
        font-size: 27px;
    }

    .transfer-subtitulo {
        font-size: 13px;
    }

    .transfer-success-box,
    .transfer-empty {
        padding: 25px 17px;
    }
}


/* =========================================================
   VINCULAR PLACA - PETSKAN
   Página: add_placa.php
   Permite vincular una placa nueva o transferida mediante
   el ID y el código de activación.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.placa-link-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.placa-link-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.placa-link-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE LA PÁGINA
   Se define completa para no depender de otras pantallas.
   --------------------------------------------------------- */

.placa-link-card > .petskan-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 34px;
    width: auto;
    min-height: 196px;
    margin: 0 -32px;
    padding: 31px 38px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.placa-link-card .petskan-header-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 225px;
}

.placa-link-card .petskan-header-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
}

.placa-link-card .petskan-header-content {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.placa-link-card .petskan-header-eyebrow {
    margin: 0 0 8px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.placa-link-card .petskan-header-title {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.placa-link-card .petskan-header-subtitle {
    max-width: 410px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.placa-link-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.placa-link-alert i {
    margin-top: 2px;
}

.placa-link-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.placa-link-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}


/* ---------------------------------------------------------
   5. FORMULARIO DE VINCULACIÓN
   --------------------------------------------------------- */

.placa-link-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.placa-link-field {
    display: grid;
    gap: 8px;
}

.placa-link-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #324150;
    font-size: .82rem;
    font-weight: 900;
}

.placa-link-field label i {
    color: #2196f3;
}

.placa-link-input-wrap {
    position: relative;
}

.placa-link-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #7b8793;
    font-size: .88rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.placa-link-input-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 12px 15px 12px 43px;
    background: #ffffff;
    color: #243243;
    border: 1px solid #ccd7df;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.placa-link-input-wrap input::placeholder {
    color: #9aa5af;
}

.placa-link-input-wrap input:hover {
    border-color: #aebdca;
}

.placa-link-input-wrap input:focus {
    background: #fbfdff;
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .14);
}


/* ---------------------------------------------------------
   6. AVISO IMPORTANTE
   --------------------------------------------------------- */

.placa-link-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: #fff7df;
    color: #805e0c;
    border: 1px solid #ecd88a;
    border-radius: 12px;
}

.placa-link-notice > i {
    margin-top: 3px;
}

.placa-link-notice > div {
    min-width: 0;
}

.placa-link-notice strong {
    display: block;
    color: #6d500b;
    font-size: .84rem;
}

.placa-link-notice p {
    margin: 5px 0 0;
    font-size: .79rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   7. SEPARADOR ENTRE ACCIONES
   --------------------------------------------------------- */

.placa-link-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 21px 0;
}

.placa-link-divider::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: #dfe6ec;
}

.placa-link-divider span {
    position: relative;
    z-index: 1;
    padding: 0 11px;
    background: #ffffff;
    color: #8a949e;
    font-size: .73rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   8. RESULTADO EXITOSO
   --------------------------------------------------------- */

.placa-link-success {
    margin-top: 22px;
    padding: 29px 22px;
    background: #eefaf3;
    border: 1px solid #bce8cf;
    border-radius: 16px;
    text-align: center;
}

.placa-link-success-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #dff5e8;
    color: #198754;
    border-radius: 50%;
    font-size: 1.45rem;
}

.placa-link-success h2 {
    margin: 0;
    color: #1d5f3d;
    font-size: 1.16rem;
}

.placa-link-success p {
    max-width: 470px;
    margin: 10px auto 0;
    color: #52705f;
    font-size: .83rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   9. BOTONES Y ACCIONES
   --------------------------------------------------------- */

.placa-link-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 22px;
}

.placa-link-btn,
.placa-link-btn:link,
.placa-link-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.placa-link-btn:hover {
    transform: translateY(-2px);
}

.placa-link-btn-primary {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.placa-link-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.placa-link-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.placa-link-btn-secondary:hover {
    background: #e1ebf2;
}


/* ---------------------------------------------------------
   10. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .placa-link-shell {
        padding: 16px 10px;
    }

    .placa-link-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .placa-link-card > .petskan-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
        flex-direction: column;
        gap: 17px;
    }

    .placa-link-card .petskan-header-logo-wrap {
        flex: none;
        width: 100%;
    }

    .placa-link-card .petskan-header-logo {
        width: 205px;
    }

    .placa-link-card .petskan-header-content {
        width: 100%;
    }

    .placa-link-card .petskan-header-title {
        font-size: clamp(27px, 8vw, 34px);
    }

    .placa-link-actions {
        grid-template-columns: 1fr;
    }

    .placa-link-actions .placa-link-btn-primary {
        order: -1;
    }
}


/* ---------------------------------------------------------
   11. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .placa-link-card > .petskan-header {
        padding: 22px 16px;
    }

    .placa-link-card .petskan-header-logo {
        width: 185px;
    }

    .placa-link-card .petskan-header-title {
        font-size: 27px;
    }

    .placa-link-card .petskan-header-subtitle {
        font-size: 13px;
    }

    .placa-link-success {
        padding: 25px 17px;
    }
}


/* =========================================================
   ELIMINAR CUENTA - PETSKAN
   Página: delete_cuenta.php
   Gestiona la solicitud por correo, la confirmación final,
   los errores del enlace y el resultado de eliminación.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.delete-account-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.delete-account-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.delete-account-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 700px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE ELIMINACIÓN DE CUENTA
   --------------------------------------------------------- */

.delete-account-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0 -32px;
    padding: 30px 34px 28px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    text-align: center;
}

.delete-account-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.delete-account-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .86);
    color: #c63232;
    border-radius: 50%;
    font-size: 1.35rem;
    box-shadow: 0 7px 18px rgba(73, 49, 15, .15);
}

.delete-account-eyebrow {
    margin: 0 0 7px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.delete-account-header h1 {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.delete-account-subtitle {
    max-width: 500px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.delete-account-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.delete-account-alert i {
    margin-top: 2px;
}

.delete-account-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.delete-account-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}


/* ---------------------------------------------------------
   5. INFORMACIÓN DEL USUARIO
   --------------------------------------------------------- */

.delete-account-user {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #dfe7ed;
    border-radius: 14px;
}

.delete-account-user-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background: #e8f3fd;
    color: #2196f3;
    border-radius: 50%;
    font-size: 1.05rem;
}

.delete-account-user > div {
    min-width: 0;
}

.delete-account-user strong,
.delete-account-user span {
    display: block;
    overflow-wrap: anywhere;
}

.delete-account-user strong {
    color: #263444;
    font-size: .92rem;
}

.delete-account-user > div > span {
    margin-top: 4px;
    color: #71808d;
    font-size: .79rem;
}


/* ---------------------------------------------------------
   6. ADVERTENCIAS DE ELIMINACIÓN
   --------------------------------------------------------- */

.delete-account-warning {
    margin-top: 18px;
    padding: 18px;
    background: #fff4e8;
    color: #754b1a;
    border: 1px solid #efc996;
    border-left: 5px solid #e48b2f;
    border-radius: 14px;
}

.delete-account-warning-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.delete-account-warning-title i {
    color: #d97706;
}

.delete-account-warning-title strong {
    color: #673d11;
    font-size: .94rem;
}

.delete-account-warning ul {
    margin: 12px 0 0;
    padding-left: 20px;
}

.delete-account-warning li {
    margin: 6px 0;
    font-size: .80rem;
    line-height: 1.45;
}

.delete-account-warning p {
    margin: 11px 0 0;
    font-size: .80rem;
    line-height: 1.5;
}

.delete-account-warning-final {
    background: #fff0f0;
    color: #8f2d2d;
    border-color: #efb4b4;
    border-left-color: #d64242;
}

.delete-account-warning-final .delete-account-warning-title i,
.delete-account-warning-final .delete-account-warning-title strong {
    color: #a72e2e;
}


/* ---------------------------------------------------------
   7. CORREO DE CONFIRMACIÓN ENVIADO
   --------------------------------------------------------- */

.delete-account-email-box {
    margin-top: 22px;
    padding: 29px 22px;
    background: #eef6ff;
    border: 1px solid #bedaf3;
    border-radius: 16px;
    text-align: center;
}

.delete-account-email-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #dceeff;
    color: #1976d2;
    border-radius: 50%;
    font-size: 1.42rem;
}

.delete-account-email-box h2 {
    margin: 0;
    color: #24577d;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.delete-account-email-box p {
    max-width: 470px;
    margin: 10px auto 0;
    color: #58758b;
    font-size: .83rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   8. CUENTA ELIMINADA CORRECTAMENTE
   --------------------------------------------------------- */

.delete-account-success {
    margin-top: 22px;
    padding: 29px 22px;
    background: #eefaf3;
    border: 1px solid #bce8cf;
    border-radius: 16px;
    text-align: center;
}

.delete-account-success-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #dff5e8;
    color: #198754;
    border-radius: 50%;
    font-size: 1.45rem;
}

.delete-account-success h2 {
    margin: 0;
    color: #1d5f3d;
    font-size: 1.16rem;
}

.delete-account-success p {
    max-width: 470px;
    margin: 10px auto 0;
    color: #52705f;
    font-size: .83rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   9. BOTONES Y CONTENEDOR DE ACCIONES
   --------------------------------------------------------- */

.delete-account-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 22px;
}

.delete-account-success + .delete-account-actions,
.delete-account-email-box + .delete-account-actions {
    grid-template-columns: minmax(0, 1fr);
}

.delete-account-btn,
.delete-account-btn:link,
.delete-account-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        opacity .18s ease;
}

.delete-account-btn:hover {
    transform: translateY(-2px);
}

.delete-account-btn-primary {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.delete-account-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.delete-account-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.delete-account-btn-secondary:hover {
    background: #e1ebf2;
}

.delete-account-btn-danger {
    border: 0;
    background: #d94a4a;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(217, 74, 74, .24);
}

.delete-account-btn-danger:hover {
    background: #c73939;
    box-shadow: 0 11px 24px rgba(217, 74, 74, .31);
}

.delete-account-btn:disabled {
    cursor: wait;
    opacity: .72;
    transform: none;
    box-shadow: none;
}


/* ---------------------------------------------------------
   10. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .delete-account-shell {
        padding: 16px 10px;
    }

    .delete-account-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .delete-account-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
    }

    .delete-account-logo {
        width: 205px;
    }

    .delete-account-header h1 {
        font-size: clamp(27px, 8vw, 34px);
    }

    .delete-account-actions {
        grid-template-columns: 1fr;
    }

    .delete-account-actions .delete-account-btn-danger,
    .delete-account-actions .delete-account-btn-primary {
        order: -1;
    }
}


/* ---------------------------------------------------------
   11. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .delete-account-header {
        padding: 22px 16px;
    }

    .delete-account-logo {
        width: 185px;
    }

    .delete-account-header h1 {
        font-size: 27px;
    }

    .delete-account-subtitle {
        font-size: 13px;
    }

    .delete-account-user {
        align-items: flex-start;
    }

    .delete-account-warning,
    .delete-account-email-box,
    .delete-account-success {
        padding: 16px;
    }
}


/* =========================================================
   REGISTRO DE CUENTA - PETSKAN
   Agregar al final de css/estilos.css
   Compatible con Font Awesome 7.3.1 local
   ========================================================= */

.registro-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(135deg, #ffda43 0%, #ffca30 52%, #ffb01e 100%);
    color: #1f2937;
}

.registro-shell {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 28px 14px;
}

.registro-card {
    box-sizing: border-box;
    width: min(570px, 100%);
    padding: 34px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(111,68,0,.2);
}

.registro-header {
    text-align: center;
}

.registro-logo {
    display: block;
    width: min(300px, 84%);
    height: auto;
    margin: 0 auto 20px;
}

.registro-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 15px;
    background: #e8f4ff;
    color: #1685dc;
    border-radius: 17px;
    font-size: 1.55rem;
    box-shadow: 0 8px 18px rgba(33,150,243,.16);
}

.registro-eyebrow {
    margin: 0 0 6px;
    color: #d56f00;
    font-size: .77rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.registro-header h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    line-height: 1.16;
}

.registro-subtitle {
    max-width: 450px;
    margin: 12px auto 0;
    color: #66707d;
    font-size: .93rem;
    line-height: 1.58;
}

.registro-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 24px;
    padding: 15px 17px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
}

.registro-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.registro-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}

.registro-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 27px;
}

.registro-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #374151;
    font-size: .88rem;
    font-weight: 800;
}

.registro-field label i {
    color: #2196f3;
}

.registro-input-wrap,
.registro-password-wrap {
    position: relative;
}

.registro-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    color: #7a8794;
    transform: translateY(-50%);
    pointer-events: none;
}

.registro-input-wrap input,
.registro-password-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    background: #fff;
    color: #1f2937;
    border: 1px solid #cad4de;
    border-radius: 11px;
    font: inherit;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.registro-input-wrap input {
    padding: 12px 14px 12px 43px;
}

.registro-password-wrap input {
    padding: 12px 52px 12px 14px;
}

.registro-input-wrap input:hover,
.registro-password-wrap input:hover {
    border-color: #9cc7e8;
}

.registro-input-wrap input:focus,
.registro-password-wrap input:focus {
    outline: none;
    border-color: #2196f3;
    background: #fbfdff;
    box-shadow: 0 0 0 4px rgba(33,150,243,.14);
}

.registro-toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    color: #6f7a86;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transform: translateY(-50%);
}

.registro-toggle-password:hover {
    background: #eef6fc;
    color: #1778ba;
}

.registro-requisitos {
    padding: 14px 16px;
    background: #f7fafc;
    color: #68727f;
    border: 1px solid #e3e9ef;
    border-radius: 11px;
    font-size: .82rem;
    line-height: 1.5;
}

.registro-requisitos p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 7px;
    color: #43505e;
    font-weight: 800;
}

.registro-requisitos p i {
    color: #2196f3;
}

.registro-requisitos ul {
    margin: 0;
    padding-left: 22px;
}

.registro-btn,
.registro-btn:link,
.registro-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 12px 20px;
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-size: .9rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.registro-btn:hover {
    transform: translateY(-2px);
}

.registro-btn-primary {
    background: #2196f3;
    color: #fff;
    box-shadow: 0 8px 20px rgba(33,150,243,.28);
}

.registro-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 25px rgba(33,150,243,.34);
}

.registro-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d4e0e9;
}

.registro-btn-secondary:hover {
    background: #e2ebf2;
}

.registro-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 24px 0 17px;
    color: #8a95a1;
    font-size: .8rem;
    font-weight: 700;
}

.registro-divider::before,
.registro-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e5ea;
}

.registro-success {
    margin-top: 24px;
    padding: 24px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8ef;
    border-radius: 15px;
    text-align: center;
}

.registro-success-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    background: #e8f8ef;
    color: #1c8a55;
    border-radius: 50%;
    font-size: 1.7rem;
}

.registro-success h2 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 1.2rem;
}

.registro-success p {
    max-width: 450px;
    margin: 0 auto;
    color: #68727f;
    font-size: .88rem;
    line-height: 1.55;
}

.registro-actions {
    margin-top: 22px;
}

.registro-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 0;
    color: #7a8490;
    font-size: .78rem;
    line-height: 1.4;
    text-align: center;
}

.registro-security i {
    color: #2196f3;
}

@media (max-width: 560px) {
    .registro-shell {
        align-items: start;
        padding-top: 14px;
    }

    .registro-card {
        padding: 27px 18px;
        border-radius: 20px;
    }

    .registro-logo {
        width: min(275px, 88%);
    }
}

/* =========================================================
   ACTIVACIÓN DE CUENTA - PETSKAN
   Agregar al final de css/estilos.css
   Compatible con Font Awesome 7.3.1 local
   ========================================================= */

.activation-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(135deg, #ffda43 0%, #ffca30 52%, #ffb01e 100%);
    color: #1f2937;
}

.activation-shell {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 28px 14px;
}

.activation-card {
    box-sizing: border-box;
    width: min(560px, 100%);
    padding: 34px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(111,68,0,.2);
}

.activation-header {
    text-align: center;
}

.activation-logo {
    display: block;
    width: min(300px, 84%);
    height: auto;
    margin: 0 auto 20px;
}

.activation-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 15px;
    background: #e8f4ff;
    color: #1685dc;
    border-radius: 17px;
    font-size: 1.55rem;
    box-shadow: 0 8px 18px rgba(33,150,243,.16);
}

.activation-icon-success {
    background: #e8f8ef;
    color: #1c8a55;
}

.activation-eyebrow {
    margin: 0 0 6px;
    color: #d56f00;
    font-size: .77rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.activation-header h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    line-height: 1.16;
}

.activation-subtitle {
    max-width: 440px;
    margin: 12px auto 0;
    color: #66707d;
    font-size: .93rem;
    line-height: 1.58;
}

.activation-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 25px;
    padding: 15px 17px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
}

.activation-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.activation-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}

.activation-alert-info {
    background: #edf6ff;
    color: #17679d;
    border: 1px solid #c8e3f8;
    border-left: 5px solid #2196f3;
}

.activation-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

.activation-btn,
.activation-btn:link,
.activation-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 12px 20px;
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-size: .9rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.activation-btn:hover {
    transform: translateY(-2px);
}

.activation-btn-primary {
    background: #2196f3;
    color: #fff;
    box-shadow: 0 8px 20px rgba(33,150,243,.28);
}

.activation-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 25px rgba(33,150,243,.34);
}

.activation-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d4e0e9;
}

.activation-btn-secondary:hover {
    background: #e2ebf2;
}

@media (max-width: 560px) {
    .activation-shell {
        align-items: start;
        padding-top: 14px;
    }

    .activation-card {
        padding: 27px 18px;
        border-radius: 20px;
    }

    .activation-logo {
        width: min(275px, 88%);
    }
}

.admin-stat-icon-registrado {
    background: #e8f8ef;
    color: #198754;
}

.admin-stat-icon-perdido {
    background: #fff0f0;
    color: #d93636;
}

.admin-stat-icon-homenaje {
    background: #f4eaff;
    color: #7a3db8;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TARJETAS DE INGRESOS - RESUMEN ADMINISTRATIVO
   ========================================================= */

.admin-stat-income {
    position: relative;
    overflow: hidden;
}

.admin-stat-income::after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -28px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}


/* Ingreso del día */

.admin-stat-icon-income-day {
    background: #e8f8ef;
    color: #198754;
}


/* Ingreso de últimos 30 días */

.admin-stat-icon-income-month {
    background: #e9f3ff;
    color: #176fc1;
}


/* Ingreso histórico */

.admin-stat-icon-income-total {
    background: #fff3df;
    color: #d97706;
}


/* Descripción pequeña debajo del valor */

.admin-stat-detail {
    display: block;
    margin-top: 5px;
    color: #7a8491;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}


/* Valores monetarios */

.admin-stat-money {
    white-space: nowrap;
}


/* =========================================================
   EDITAR MASCOTA - PETSKAN
   Archivo exclusivo para edit_pet.php
   ========================================================= */

.pet-edit-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 31%),
        linear-gradient(135deg, #ffdc43 0%, #ffca2d 52%, #ffad1d 100%);
    color: #1d2734;
    text-align: left;
}

.pet-edit-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.pet-edit-card {
    width: 100%;
    max-width: 720px;
    padding: 0;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93,69,24,.16);
    overflow: hidden;
}

.pet-edit-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 34px;
    width: 100%;
    min-height: 196px;
    margin: 0;
    padding: 32px 38px;
    background: #ffa51f;
}

.pet-edit-header-logo-wrap {
    flex: 0 0 235px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-edit-header-logo {
    display: block;
    width: 225px;
    max-width: 100%;
    height: auto;
}

.pet-edit-header-content {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.pet-edit-header-eyebrow {
    margin: 0 0 8px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.pet-edit-header-title {
    margin: 0;
    color: #10213d;
    font-size: clamp(29px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.1;
}

.pet-edit-header-subtitle {
    max-width: 430px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}

.pet-edit-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 24px 32px 0;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.45;
}

.pet-edit-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.pet-edit-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}

.pet-edit-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 24px 32px 32px;
}

.pet-edit-section {
    padding: 22px;
    background: #f8fafc;
    border: 1px solid #e3e8ee;
    border-radius: 16px;
}

.pet-edit-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.pet-edit-section-title > span {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: #e8f4ff;
    color: #1684d7;
    border-radius: 12px;
    font-size: 1.15rem;
}

.pet-edit-section-title h2 {
    margin: 0;
    color: #172033;
    font-size: 1.15rem;
    line-height: 1.25;
}

.pet-edit-section-title p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: .82rem;
    line-height: 1.4;
}

.pet-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.pet-edit-field {
    min-width: 0;
}

.pet-edit-field-full {
    grid-column: 1 / -1;
}

.pet-edit-field label {
    display: block;
    margin: 0 0 7px;
    color: #344052;
    font-size: .86rem;
    font-weight: 800;
    text-align: left;
}

.pet-edit-control {
    position: relative;
}

.pet-edit-control > i {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    transform: translateY(-50%);
    color: #2196f3;
    font-size: .95rem;
    pointer-events: none;
}

.pet-edit-field input,
.pet-edit-field select,
.pet-edit-field textarea,
.pet-edit-control input,
.pet-edit-control select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 13px;
    background: #fff;
    color: #1f2937;
    border: 1px solid #cfd6df;
    border-radius: 10px;
    font: inherit;
    text-align: left;
}

.pet-edit-control input,
.pet-edit-control select {
    min-height: 46px;
    padding-left: 40px;
}

.pet-edit-field textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.pet-edit-field input:focus,
.pet-edit-field select:focus,
.pet-edit-field textarea:focus {
    outline: 3px solid rgba(33,150,243,.15);
    border-color: #2196f3;
}

.pet-edit-helper {
    display: block;
    margin-top: 7px;
    color: #6b7280;
    font-size: .78rem;
    line-height: 1.4;
}

.pet-edit-memorial {
    background: #fbf6ff;
    border-color: #e7d8f4;
}

.pet-edit-memorial .pet-edit-section-title > span {
    background: #f0e2ff;
    color: #7b3bad;
}

.pet-edit-section[hidden] {
    display: none !important;
}

.pet-edit-photo-layout {
    display: grid;
    grid-template-columns: 190px minmax(0,1fr);
    gap: 22px;
    align-items: stretch;
}

.pet-edit-photo-preview {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    background: #edf1f5;
    border-radius: 15px;
}

.pet-edit-photo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
}

.pet-edit-photo-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 6px 9px;
    background: rgba(23,32,51,.78);
    color: #fff;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
}

.pet-edit-upload {
    min-width: 0;
}

.pet-edit-upload-label {
    box-sizing: border-box;
    display: flex;
    min-height: 190px;
    padding: 22px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #344052;
    border: 2px dashed #b9d9f2;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.pet-edit-upload-label:hover {
    background: #f2f9ff;
    border-color: #2196f3;
}

.pet-edit-upload-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 4px;
    background: #e8f4ff;
    color: #1684d7;
    border-radius: 13px;
    font-size: 1.25rem;
}

.pet-edit-upload-label strong {
    color: #172033;
    font-size: .92rem;
}

.pet-edit-upload-label small {
    color: #6b7280;
    font-size: .77rem;
}

.pet-edit-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.pet-edit-file-name {
    margin: 9px 0 0;
    color: #6b7280;
    font-size: .77rem;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

.pet-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 2px;
}

.pet-edit-btn,
.pet-edit-btn:link,
.pet-edit-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    margin: 0;
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.pet-edit-btn:hover {
    transform: translateY(-1px);
}

.pet-edit-btn-primary {
    background: #2196f3;
    color: #fff;
    box-shadow: 0 7px 17px rgba(33,150,243,.24);
}

.pet-edit-btn-primary:hover {
    background: #1687df;
}

.pet-edit-btn-secondary {
    background: #eef2f5;
    color: #46505d;
    border: 1px solid #d9e0e6;
}

.pet-edit-btn-secondary:hover {
    background: #e1e7ec;
}

@media (max-width: 700px) {
    .pet-edit-shell {
        padding: 16px 10px;
    }

    .pet-edit-card {
        border-radius: 20px;
    }

    .pet-edit-header {
        min-height: auto;
        padding: 25px 20px 24px;
        flex-direction: column;
        gap: 17px;
    }

    .pet-edit-header-logo-wrap {
        flex: none;
        width: 100%;
    }

    .pet-edit-header-logo {
        width: 205px;
    }

    .pet-edit-header-content {
        width: 100%;
    }

    .pet-edit-header-title {
        font-size: clamp(27px, 8vw, 34px);
    }

    .pet-edit-alert {
        margin: 18px 16px 0;
    }

    .pet-edit-form {
        padding: 20px 16px 24px;
    }

    .pet-edit-section {
        padding: 18px 15px;
    }

    .pet-edit-grid,
    .pet-edit-photo-layout {
        grid-template-columns: 1fr;
    }

    .pet-edit-field-full {
        grid-column: auto;
    }

    .pet-edit-photo-preview,
    .pet-edit-photo-preview img {
        min-height: 240px;
    }

    .pet-edit-actions {
        flex-direction: column-reverse;
    }

    .pet-edit-btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .pet-edit-header {
        padding: 22px 16px;
    }

    .pet-edit-header-logo {
        width: 185px;
    }

    .pet-edit-header-title {
        font-size: 27px;
    }

    .pet-edit-header-subtitle {
        font-size: 13px;
    }

    .pet-edit-section-title {
        align-items: flex-start;
    }
}

/* =========================================================
   VISIBILIDAD DEL PERFIL - PETSKAN
   Página: see.php
   Controla si el perfil público de la mascota puede verse
   al escanear la placa.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.visibility-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.visibility-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.visibility-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE LA PÁGINA
   Utiliza las clases compartidas petskan-header-*.
   Estas reglas ajustan únicamente la cabecera de see.php.
   --------------------------------------------------------- */

.visibility-card > .petskan-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 34px;
    width: auto;
    min-height: 196px;
    margin: 0 -32px;
    padding: 31px 38px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.visibility-card .petskan-header-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 225px;
}

.visibility-card .petskan-header-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
}

.visibility-card .petskan-header-content {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.visibility-card .petskan-header-eyebrow {
    margin: 0 0 8px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.visibility-card .petskan-header-title {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.visibility-card .petskan-header-subtitle {
    max-width: 410px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. INFORMACIÓN DE LA MASCOTA
   --------------------------------------------------------- */

.visibility-pet {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 25px;
    padding: 17px;
    background: #f8fafc;
    border: 1px solid #e0e7ed;
    border-radius: 16px;
}

.visibility-pet-photo {
    flex: 0 0 84px;
    overflow: hidden;
    width: 84px;
    height: 84px;
    background: #e8edf2;
    border: 4px solid #2196f3;
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(33, 150, 243, .20);
}

.visibility-pet-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visibility-pet-info {
    min-width: 0;
}

.visibility-pet-info > span {
    display: block;
    margin-bottom: 4px;
    color: #788491;
    font-size: .70rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.visibility-pet-info strong {
    display: block;
    color: #172033;
    font-size: 1.14rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.visibility-pet-info small {
    display: block;
    margin-top: 4px;
    color: #687583;
    font-size: .76rem;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   5. ESTADO ACTUAL DE VISIBILIDAD
   --------------------------------------------------------- */

.visibility-status {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 18px;
    padding: 18px;
    border-radius: 16px;
}

.visibility-status-visible {
    background: #eaf9f1;
    border: 1px solid #bce8ce;
}

.visibility-status-hidden {
    background: #fff1f1;
    border: 1px solid #f0c8c8;
}

.visibility-status-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, .82);
    border-radius: 13px;
    font-size: 1.1rem;
}

.visibility-status-visible .visibility-status-icon {
    color: #198754;
}

.visibility-status-hidden .visibility-status-icon {
    color: #d13b3b;
}

.visibility-status > div {
    min-width: 0;
}

.visibility-status div > span {
    display: block;
    margin-bottom: 4px;
    color: #6d7884;
    font-size: .70rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.visibility-status strong {
    display: block;
    color: #1f2937;
    font-size: 1rem;
}

.visibility-status p {
    margin: 7px 0 0;
    color: #62707d;
    font-size: .82rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   6. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.visibility-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.visibility-alert i {
    margin-top: 2px;
}

.visibility-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.visibility-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}


/* ---------------------------------------------------------
   7. CONFIRMACIÓN Y AVISOS
   --------------------------------------------------------- */

.visibility-confirm {
    margin-top: 21px;
}

.visibility-confirm > p {
    margin: 0;
    color: #293646;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.visibility-warning,
.visibility-info {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
    padding: 14px 15px;
    border-radius: 12px;
    font-size: .80rem;
    line-height: 1.5;
}

.visibility-warning i,
.visibility-info i {
    margin-top: 2px;
}

.visibility-warning {
    background: #fff7df;
    color: #805e0c;
    border: 1px solid #ecd88a;
}

.visibility-info {
    background: #edf6ff;
    color: #17679d;
    border: 1px solid #c8e3f8;
}


/* ---------------------------------------------------------
   8. BOTONES Y ACCIONES
   --------------------------------------------------------- */

.visibility-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 22px;
}

.visibility-actions-single {
    grid-template-columns: minmax(0, 1fr);
}

.visibility-btn,
.visibility-btn:link,
.visibility-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.visibility-btn:hover {
    transform: translateY(-2px);
}

.visibility-btn-primary {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.visibility-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.visibility-btn-danger {
    border: 0;
    background: #d94a4a;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(217, 74, 74, .24);
}

.visibility-btn-danger:hover {
    background: #c73939;
    box-shadow: 0 11px 24px rgba(217, 74, 74, .31);
}

.visibility-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.visibility-btn-secondary:hover {
    background: #e1ebf2;
}


/* ---------------------------------------------------------
   9. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .visibility-shell {
        padding: 16px 10px;
    }

    .visibility-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .visibility-card > .petskan-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
        flex-direction: column;
        gap: 17px;
    }

    .visibility-card .petskan-header-logo-wrap {
        flex: none;
        width: 100%;
    }

    .visibility-card .petskan-header-logo {
        width: 205px;
    }

    .visibility-card .petskan-header-content {
        width: 100%;
    }

    .visibility-card .petskan-header-title {
        font-size: clamp(27px, 8vw, 34px);
    }

    .visibility-pet {
        margin-top: 20px;
    }

    .visibility-actions {
        grid-template-columns: 1fr;
    }

    .visibility-btn-danger,
    .visibility-btn-primary {
        order: -1;
    }
}


/* ---------------------------------------------------------
   10. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .visibility-card > .petskan-header {
        padding: 22px 16px;
    }

    .visibility-card .petskan-header-logo {
        width: 185px;
    }

    .visibility-card .petskan-header-title {
        font-size: 27px;
    }

    .visibility-card .petskan-header-subtitle {
        font-size: 13px;
    }

    .visibility-pet {
        align-items: flex-start;
        gap: 13px;
        padding: 14px;
    }

    .visibility-pet-photo {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
    }

    .visibility-status {
        padding: 15px;
    }

    .visibility-status-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }
}



.mascota-visibilidad {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
}

.mascota-visibilidad-visible {
    color: #198754;
}

.mascota-visibilidad-oculta {
    color: #c74646;
}

/* =========================================================
   HISTORIAL DE ESCANEOS - PETSKAN
   Página: ubica.php
   Presenta los últimos registros de escaneo y permite abrir
   las ubicaciones disponibles en Google Maps.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.scans-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.scans-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.scans-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 820px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE LA PÁGINA
   Se define completa para no depender de otras pantallas.
   --------------------------------------------------------- */

.scans-card > .petskan-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 34px;
    width: auto;
    min-height: 196px;
    margin: 0 -32px;
    padding: 31px 38px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.scans-card .petskan-header-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 225px;
}

.scans-card .petskan-header-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
}

.scans-card .petskan-header-content {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.scans-card .petskan-header-eyebrow {
    margin: 0 0 8px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.scans-card .petskan-header-title {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.scans-card .petskan-header-subtitle {
    max-width: 430px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. RESUMEN DE LA MASCOTA Y TOTAL DE ESCANEOS
   --------------------------------------------------------- */

.scans-pet-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    margin-top: 25px;
    padding: 17px;
    background: #f8fafc;
    border: 1px solid #e0e7ed;
    border-radius: 16px;
}

.scans-pet-photo {
    overflow: hidden;
    width: 84px;
    height: 84px;
    background: #e8edf2;
    border: 4px solid #2196f3;
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(33, 150, 243, .20);
}

.scans-pet-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scans-pet-data {
    min-width: 0;
}

.scans-pet-data > span {
    display: block;
    margin-bottom: 4px;
    color: #788491;
    font-size: .70rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.scans-pet-data strong {
    display: block;
    color: #172033;
    font-size: 1.14rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.scans-pet-data small {
    display: block;
    margin-top: 4px;
    color: #687583;
    font-size: .76rem;
}

.scans-total {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 118px;
    padding: 12px 15px;
    background: #edf6ff;
    color: #17679d;
    border: 1px solid #c8e3f8;
    border-radius: 13px;
}

.scans-total > i {
    font-size: 1.25rem;
}

.scans-total strong {
    display: block;
    color: #124f78;
    font-size: 1.15rem;
    line-height: 1;
}

.scans-total span {
    display: block;
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 800;
}


/* ---------------------------------------------------------
   5. AVISO INFORMATIVO
   --------------------------------------------------------- */

.scans-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 18px;
    padding: 14px 15px;
    background: #fff7df;
    color: #805e0c;
    border: 1px solid #ecd88a;
    border-radius: 12px;
}

.scans-notice i {
    margin-top: 3px;
}

.scans-notice p {
    margin: 0;
    font-size: .81rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   6. ESTADO SIN REGISTROS
   --------------------------------------------------------- */

.scans-empty {
    margin-top: 22px;
    padding: 34px 20px;
    background: #f8fafc;
    border: 1px dashed #cdd8e1;
    border-radius: 16px;
    text-align: center;
}

.scans-empty-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #eaf4ff;
    color: #2196f3;
    border-radius: 50%;
    font-size: 1.45rem;
}

.scans-empty h2 {
    margin: 0;
    color: #263444;
    font-size: 1.15rem;
}

.scans-empty p {
    max-width: 430px;
    margin: 9px auto 0;
    color: #697684;
    font-size: .84rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   7. CABECERA DEL HISTORIAL
   --------------------------------------------------------- */

.scans-history {
    margin-top: 23px;
}

.scans-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.scans-section-title p {
    margin: 0 0 3px;
    color: #2196f3;
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scans-section-title h2 {
    margin: 0;
    color: #243243;
    font-size: 1.13rem;
}

.scans-section-title > span {
    padding: 7px 10px;
    background: #eef3f7;
    color: #65727f;
    border-radius: 999px;
    font-size: .70rem;
    font-weight: 800;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   8. LISTA DE ESCANEOS
   --------------------------------------------------------- */

.scans-list {
    display: grid;
    gap: 13px;
}

.scan-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 17px;
    background: #ffffff;
    border: 1px solid #dfe6ec;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(35, 49, 63, .06);
}

.scan-item-latest {
    border-color: #90caf9;
    box-shadow: 0 7px 20px rgba(33, 150, 243, .12);
}

.scan-marker {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: #edf6ff;
    color: #2196f3;
    border-radius: 12px;
    font-size: 1.05rem;
}

.scan-item-latest .scan-marker {
    background: #2196f3;
    color: #ffffff;
}

.scan-content {
    min-width: 0;
}

.scan-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.scan-label {
    display: block;
    margin-bottom: 3px;
    color: #2196f3;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.scan-header-row strong {
    display: block;
    color: #263444;
    font-size: .97rem;
}

.scan-header-row time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #75818d;
    font-size: .74rem;
    white-space: nowrap;
}

.scan-coordinates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 13px;
    padding: 11px 12px;
    background: #f7fafc;
    border: 1px solid #e1e8ee;
    border-radius: 10px;
}

.scan-coordinates > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #62707d;
    font-size: .72rem;
    font-weight: 800;
}

.scan-coordinates code {
    color: #1d5f8c;
    font-size: .77rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.scan-coordinates-unavailable {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
}

.scan-coordinates-unavailable small {
    color: #7c8792;
    font-size: .73rem;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   9. BOTÓN DE MAPA Y UBICACIÓN NO DISPONIBLE
   --------------------------------------------------------- */

.scan-map-btn,
.scan-map-btn:link,
.scan-map-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 41px;
    margin-top: 13px;
    padding: 9px 14px;
    background: #2196f3;
    color: #ffffff;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(33, 150, 243, .23);
    transition:
        transform .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.scan-map-btn:hover {
    background: #1686dc;
    transform: translateY(-2px);
    box-shadow: 0 9px 18px rgba(33, 150, 243, .30);
}

.scan-map-unavailable {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 9px 12px;
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f1c8c8;
    border-radius: 9px;
    font-size: .76rem;
    font-weight: 800;
}


/* ---------------------------------------------------------
   10. PIE DE PÁGINA Y BOTÓN REGRESAR
   --------------------------------------------------------- */

.scans-actions {
    margin-top: 23px;
}

.scans-btn,
.scans-btn:link,
.scans-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border-radius: 11px;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    transition:
        transform .18s ease,
        background-color .18s ease;
}

.scans-btn:hover {
    transform: translateY(-2px);
}

.scans-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.scans-btn-secondary:hover {
    background: #e1ebf2;
}


/* ---------------------------------------------------------
   11. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .scans-shell {
        padding: 16px 10px;
    }

    .scans-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .scans-card > .petskan-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
        flex-direction: column;
        gap: 17px;
    }

    .scans-card .petskan-header-logo-wrap {
        flex: none;
        width: 100%;
    }

    .scans-card .petskan-header-logo {
        width: 205px;
    }

    .scans-card .petskan-header-content {
        width: 100%;
    }

    .scans-card .petskan-header-title {
        font-size: clamp(27px, 8vw, 34px);
    }

    .scans-pet-summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .scans-total {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .scan-header-row {
        flex-direction: column;
        gap: 6px;
    }

    .scan-coordinates {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .scan-map-btn {
        width: 100%;
        box-sizing: border-box;
    }
}


/* ---------------------------------------------------------
   12. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .scans-card > .petskan-header {
        padding: 22px 16px;
    }

    .scans-card .petskan-header-logo {
        width: 185px;
    }

    .scans-card .petskan-header-title {
        font-size: 27px;
    }

    .scans-card .petskan-header-subtitle {
        font-size: 13px;
    }

    .scans-pet-summary {
        gap: 13px;
        padding: 14px;
    }

    .scans-pet-photo {
        width: 68px;
        height: 68px;
    }

    .scans-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .scan-item {
        grid-template-columns: 1fr;
    }

    .scan-marker {
        width: 38px;
        height: 38px;
    }
}


/* =========================================================
   PERFIL PÚBLICO DE MASCOTA - PETSKAN
   Página: view.php
   Presenta tres diseños visuales según el estado:
   Registrado, Perdido y Homenaje.
   Incluye cabecera naranja y una segunda franja naranja
   inferior para cerrar la identidad visual de la página.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL SEGÚN EL ESTADO DE LA MASCOTA
   --------------------------------------------------------- */

.public-profile-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}

.public-profile-body-lost {
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .38),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffd94a 0%,
            #ffbd32 54%,
            #ff9b3d 100%
        );
}

.public-profile-body-memorial {
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .47),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #eee4f6 0%,
            #dcc9ec 54%,
            #c9afe0 100%
        );
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL
   --------------------------------------------------------- */

.public-profile-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.public-profile-card,
.public-message-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    background: rgba(255, 255, 255, .985);
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 25px;
    box-shadow: 0 20px 54px rgba(74, 55, 23, .19);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA NARANJA PRINCIPAL
   --------------------------------------------------------- */

.public-profile-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 190px;
    padding: 30px 34px 27px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    text-align: center;
}

.public-profile-logo {
    display: block;
    width: 225px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 14px;
}

.public-profile-eyebrow {
    margin: 0;
    color: #8d5200;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   3.1. COLOR DE CABECERA SEGÚN EL ESTADO
   Registrado conserva el naranja institucional.
   Perdido utiliza rojo coral de alerta.
   Homenaje utiliza malva y lavanda.
   --------------------------------------------------------- */

.public-profile-body-lost .public-profile-header {
    background:
        linear-gradient(
            145deg,
            #ef6a58,
            #d94a4a
        );
}

.public-profile-body-memorial .public-profile-header {
    background:
        linear-gradient(
            145deg,
            #cfa9c4,
            #aa789d
        );
}

.public-profile-body-lost .public-profile-logo,
.public-profile-body-memorial .public-profile-logo {
    filter:
        brightness(0)
        saturate(100%)
        invert(100%);
}

.public-profile-body-lost .public-profile-eyebrow {
    color: rgba(255, 255, 255, .88);
}

.public-profile-body-memorial .public-profile-eyebrow {
    color: rgba(255, 255, 255, .88);
}

.public-profile-body-lost .public-lost-alert {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(119, 28, 28, .22);
    border-left-color: #8f2424;
}

.public-profile-body-memorial .public-memorial-heading > span {
    background: rgba(255, 255, 255, .90);
    color: #8a4d73;
}

.public-profile-body-memorial .public-memorial-heading p {
    color: #ffffff;
}


/* =========================================================
   PERFIL PÚBLICO - MASCOTA PERDIDA
   Diseño compacto para dispositivos móviles
========================================================= */

/*
|--------------------------------------------------------------------------
| Encabezado
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-profile-header {
    padding: 18px 18px 22px;
}

/*
|--------------------------------------------------------------------------
| Logotipo
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-profile-logo {
    display: block;
    width: min(210px, 70%);
    height: auto;
    margin: 0 auto 18px;
}


/*
|--------------------------------------------------------------------------
| Alerta compacta
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-lost-alert {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 14px;

    width: 100%;
    margin: 0;
    padding: 18px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(168, 40, 40, 0.14);
    border-radius: 20px;

    box-shadow:
        0 8px 0 rgba(125, 28, 28, 0.35),
        0 14px 24px rgba(99, 22, 22, 0.16);
}


/*
|--------------------------------------------------------------------------
| Icono de alerta
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-lost-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin: 0;

    color: #c92d38;
    background: #fde4e5;
    border-radius: 50%;

    font-size: 23px;
    line-height: 1;

    flex-shrink: 0;
}

.public-profile-body-lost .public-lost-alert-icon i {
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Contenido de alerta
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-lost-alert-content {
    min-width: 0;
}

.public-profile-body-lost .public-lost-alert-eyebrow {
    margin: 0 0 5px;

    color: #a7232d;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-profile-body-lost .public-lost-alert h1 {
    margin: 0;

    color: #8f2229;
    font-size: clamp(1.28rem, 5.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
}

.public-profile-body-lost .public-lost-alert-message {
    display: block;

    margin-top: 10px;

    color: #5f5b5b;
    font-size: clamp(0.96rem, 3.8vw, 1.08rem);
    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Separación entre alerta y fotografía
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-profile-header
    + .public-pet-hero {
    margin-top: 18px;
}

.public-profile-body-lost .public-pet-hero {
    padding-top: 24px;
}


/*
|--------------------------------------------------------------------------
| Fotografía completamente circular
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-pet-photo-wrap {
    position: relative;

    width: min(76vw, 330px);
    aspect-ratio: 1 / 1;
    height: auto;

    margin: 0 auto;

    overflow: hidden;
    border: 7px solid #ffffff;
    border-radius: 50%;

    outline: 5px solid rgba(217, 87, 94, 0.22);

    box-shadow:
        0 14px 30px rgba(94, 41, 41, 0.16);
}

.public-profile-body-lost .public-pet-photo {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}


/*
|--------------------------------------------------------------------------
| Nombre y estado
|--------------------------------------------------------------------------
*/

.public-profile-body-lost .public-pet-title {
    margin-top: 24px;
    text-align: center;
}

.public-profile-body-lost .public-pet-title h1 {
    margin: 0 0 15px;

    color: #10243d;
    font-size: clamp(2.4rem, 11vw, 3.8rem);
    line-height: 1;
}

.public-profile-body-lost .public-status-lost {
    padding: 10px 20px;
}

.public-profile-body-lost .public-pet-title small {
    display: block;

    margin-top: 14px;

    color: #747e89;
    font-size: 1rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Ajustes para celulares estrechos
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .public-profile-body-lost .public-profile-header {
        padding: 16px 14px 20px;
    }

    .public-profile-body-lost .public-profile-logo {
        width: min(190px, 66%);
        margin-bottom: 15px;
    }

    .public-profile-body-lost .public-lost-alert {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;

        padding: 15px;
        border-radius: 18px;
    }

    .public-profile-body-lost .public-lost-alert-icon {
        width: 44px;
        height: 44px;

        font-size: 19px;
    }

    .public-profile-body-lost .public-lost-alert h1 {
        font-size: 1.32rem;
    }

    .public-profile-body-lost .public-lost-alert-message {
        margin-top: 8px;
        font-size: 0.96rem;
    }

    .public-profile-body-lost .public-pet-hero {
        padding-top: 22px;
    }

    .public-profile-body-lost .public-pet-photo-wrap {
        width: min(74vw, 285px);
        border-width: 6px;
        outline-width: 4px;
    }

    .public-profile-body-lost .public-pet-title {
        margin-top: 22px;
    }

    .public-profile-body-lost .public-pet-title h1 {
        font-size: clamp(2.5rem, 12vw, 3.25rem);
    }
}

/* ---------------------------------------------------------
   5. CABECERA ESPECIAL - HOMENAJE
   --------------------------------------------------------- */

.public-memorial-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.public-memorial-heading > span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, .88);
    color: #a55381;
    border-radius: 50%;
    font-size: 1.35rem;
    box-shadow: 0 7px 18px rgba(82, 50, 75, .14);
}

.public-memorial-heading p {
    margin: 0;
    color: #814569;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 700;
}


/* ---------------------------------------------------------
   6. PRESENTACIÓN PRINCIPAL DE LA MASCOTA
   --------------------------------------------------------- */

.public-pet-hero {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center;
    gap: 27px;
    padding: 30px 34px 25px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 249, 238, .76),
            rgba(255, 255, 255, 1)
        );
}

.public-profile-body-memorial .public-pet-hero {
    background:
        linear-gradient(
            180deg,
            rgba(249, 244, 252, .96),
            rgba(255, 255, 255, 1)
        );
}

.public-pet-photo-wrap {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto;
}

.public-pet-photo {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f1f4f6;
    border: 7px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 13px 30px rgba(45, 59, 73, .19);
}

.public-profile-body-lost .public-pet-photo {
    border-color: #fff6f3;
    box-shadow:
        0 0 0 4px rgba(214, 60, 60, .14),
        0 13px 30px rgba(74, 46, 38, .22);
}

.public-profile-body-memorial .public-pet-photo {
    filter: saturate(.88);
    border-color: #fbf7fd;
    box-shadow:
        0 0 0 4px rgba(165, 83, 129, .14),
        0 13px 30px rgba(81, 58, 79, .19);
}

.public-pet-mourning {
    position: absolute;
    right: -2px;
    bottom: -4px;
    width: 66px;
    height: auto;
    filter: drop-shadow(0 5px 8px rgba(45, 33, 46, .20));
}

.public-pet-title {
    min-width: 0;
}

.public-pet-title h1 {
    margin: 0;
    color: #17263b;
    font-size: clamp(31px, 5vw, 46px);
    font-weight: 850;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.public-profile-body-memorial .public-pet-title h1 {
    color: #68435d;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.public-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.public-status-registered {
    background: #e7f7ed;
    color: #187a47;
    border: 1px solid #bee7cd;
}

.public-status-lost {
    background: #ffe9e9;
    color: #b52e2e;
    border: 1px solid #f1baba;
}

.public-status-memorial {
    background: #f3e8f1;
    color: #8b4c71;
    border: 1px solid #ddc1d4;
}

.public-pet-title small {
    display: block;
    margin-top: 11px;
    color: #7b8791;
    font-size: .76rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   7. SECCIONES GENERALES DE INFORMACIÓN
   --------------------------------------------------------- */

.public-section {
    margin: 0 34px 24px;
    padding: 23px;
    background: #ffffff;
    border: 1px solid #dde6ec;
    border-radius: 17px;
    box-shadow: 0 7px 20px rgba(40, 58, 72, .06);
}

.public-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.public-section-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: #e9f4fd;
    color: #2196f3;
    border-radius: 13px;
    font-size: 1.05rem;
}

.public-section-heading > div {
    min-width: 0;
}

.public-section-heading p {
    margin: 0 0 3px;
    color: #72808c;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.public-section-heading h2 {
    margin: 0;
    color: #253548;
    font-size: 1.12rem;
}


/* ---------------------------------------------------------
   8. CUADRÍCULA DE DATOS
   --------------------------------------------------------- */

.public-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.public-info-item {
    min-width: 0;
    padding: 14px 15px;
    background: #f8fafc;
    border: 1px solid #e2e9ee;
    border-radius: 12px;
}

.public-info-item span {
    display: block;
    margin-bottom: 5px;
    color: #7d8993;
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.public-info-item strong {
    display: block;
    color: #2e3d4c;
    font-size: .89rem;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   9. NOTAS IMPORTANTES DE LA MASCOTA
   --------------------------------------------------------- */

.public-notes {
    margin-top: 16px;
    padding: 16px;
    background: #fff8e5;
    color: #73571d;
    border: 1px solid #eadb9f;
    border-radius: 13px;
}

.public-notes > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #694c0e;
    font-size: .79rem;
    font-weight: 900;
}

.public-notes p {
    margin: 9px 0 0;
    font-size: .82rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   10. SECCIÓN ESPECIAL DE HOMENAJE
   --------------------------------------------------------- */

.public-memorial-section {
    background:
        linear-gradient(
            145deg,
            #fffafd,
            #f8f0f6
        );
    border-color: #dfc9d9;
}

.public-memorial-section .public-section-heading > span {
    background: #f1e3ed;
    color: #a55381;
}

.public-memorial-section .public-section-heading p {
    color: #9a6b89;
}

.public-memorial-section .public-section-heading h2 {
    color: #68435d;
    font-family: Georgia, "Times New Roman", serif;
}

.public-profile-body-memorial .public-info-item {
    background: rgba(255, 255, 255, .76);
    border-color: #e3d2df;
}

.public-dedication {
    position: relative;
    margin: 18px 0 0;
    padding: 21px 20px 19px 48px;
    background: rgba(255, 255, 255, .75);
    color: #6b5062;
    border: 1px solid #dfccd9;
    border-radius: 14px;
}

.public-dedication > i {
    position: absolute;
    top: 20px;
    left: 18px;
    color: #b17a9e;
    font-size: 1.15rem;
}

.public-dedication p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .93rem;
    font-style: italic;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   11. CONTACTO DEL PROPIETARIO - ESTADO PERDIDO
   --------------------------------------------------------- */

.public-contact-section {
    background: #fff8f6;
    border-color: #f0c9c0;
}

.public-contact-section .public-section-heading > span {
    background: #ffe5df;
    color: #cf4939;
}

.public-owner-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #ead7d1;
    border-radius: 14px;
}

.public-owner-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    background: #edf5fb;
    color: #257cac;
    border-radius: 50%;
    font-size: 1.12rem;
}

.public-owner-card > div {
    min-width: 0;
}

.public-owner-card > div > span {
    display: block;
    color: #7b858e;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.public-owner-card strong {
    display: block;
    margin: 3px 0 7px;
    color: #293847;
    font-size: .96rem;
    overflow-wrap: anywhere;
}

.public-owner-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 11px 0 0;
    color: #176b9d;
    font-size: .79rem;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.public-owner-card a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   12. BOTONES DE CONTACTO - ESTADO PERDIDO
   --------------------------------------------------------- */

.public-contact-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 16px;
}

.public-action-btn,
.public-action-btn:link,
.public-action-btn:visited {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 68px;
    padding: 12px 14px;
    border: 0;
    border-radius: 13px;
    color: #ffffff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

.public-action-btn:hover {
    transform: translateY(-2px);
}

.public-action-btn > i {
    flex: 0 0 auto;
    font-size: 1.25rem;
}

.public-action-btn > span {
    min-width: 0;
    text-align: left;
}

.public-action-btn strong,
.public-action-btn small {
    display: block;
}

.public-action-btn strong {
    font-size: .79rem;
}

.public-action-btn small {
    margin-top: 3px;
    font-size: .65rem;
    opacity: .86;
}

.public-action-call {
    background: #e25745;
    box-shadow: 0 8px 18px rgba(226, 87, 69, .24);
}

.public-action-whatsapp {
    background: #25a765;
    box-shadow: 0 8px 18px rgba(37, 167, 101, .24);
}

.public-action-location {
    background: #238bc4;
    box-shadow: 0 8px 18px rgba(35, 139, 196, .24);
}


/* ---------------------------------------------------------
   13. SELLO DE CONFIANZA DE LA PLACA
   --------------------------------------------------------- */

.public-plate-trust {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 34px 25px;
    padding: 15px 17px;
    background: #f2f8fc;
    border: 1px solid #d6e5ef;
    border-radius: 14px;
}

.public-plate-trust > span {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    background: #deeffb;
    color: #187eb8;
    border-radius: 12px;
    font-size: 1.05rem;
}

.public-plate-trust > div {
    min-width: 0;
}

.public-plate-trust strong {
    display: block;
    color: #28536d;
    font-size: .82rem;
}

.public-plate-trust p {
    margin: 4px 0 0;
    color: #6c7f8b;
    font-size: .72rem;
}


/* ---------------------------------------------------------
   14. SEGUNDA FRANJA NARANJA INFERIOR
   Cierra la tarjeta sin repetir el aspecto exacto del encabezado.
   --------------------------------------------------------- */

.public-profile-footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 28px 22px;
    background:
        linear-gradient(
            145deg,
            #ffae2e,
            #ff9f1c
        );
    text-align: center;
    border-top: 1px solid rgba(138, 76, 0, .13);
}

.public-profile-footer img {
    display: block;
    width: 172px;
    max-width: 75%;
    height: auto;
}

.public-profile-footer p {
    margin: 7px 0 0;
    color: #623700;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .2px;
}


/* Estado perdido: la franja inferior repite el rojo coral */

.public-profile-body-lost .public-profile-footer {
    background:
        linear-gradient(
            145deg,
            #ef6a58,
            #d94a4a
        );
    border-top-color: rgba(108, 26, 26, .16);
}

.public-profile-body-lost .public-profile-footer img {
    filter:
        brightness(0)
        saturate(100%)
        invert(100%);
}

.public-profile-body-lost .public-profile-footer p {
    color: rgba(255, 255, 255, .91);
}


/* Estado homenaje: la franja inferior repite el malva */

.public-profile-body-memorial .public-profile-footer {
    background:
        linear-gradient(
            145deg,
            #cfa9c4,
            #aa789d
        );
    border-top-color: rgba(80, 44, 71, .16);
}

.public-profile-body-memorial .public-profile-footer img {
    filter:
        brightness(0)
        saturate(100%)
        invert(100%);
}

.public-profile-body-memorial .public-profile-footer p {
    color: rgba(255, 255, 255, .91);
}


/* ---------------------------------------------------------
   15. MENSAJES DE PLACA NO DISPONIBLE O PERFIL PRIVADO
   --------------------------------------------------------- */

.public-message-card {
    max-width: 610px;
    padding: 31px 32px 30px;
    text-align: center;
}

.public-message-logo {
    display: block;
    width: 220px;
    max-width: 80%;
    height: auto;
    margin: 0 auto 21px;
}

.public-message-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    background: #fff0e8;
    color: #d96a36;
    border-radius: 50%;
    font-size: 1.45rem;
}

.public-message-icon-private {
    background: #eaf2fa;
    color: #3578a8;
}

.public-message-card h1 {
    margin: 0;
    color: #203247;
    font-size: 1.55rem;
}

.public-message-card > p {
    max-width: 470px;
    margin: 12px auto 0;
    color: #687683;
    font-size: .88rem;
    line-height: 1.55;
}

.public-brand-seal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 14px;
    background: #f3f7fa;
    color: #537082;
    border: 1px solid #dde7ed;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}


/* ---------------------------------------------------------
   16. MODAL PARA COMPARTIR UBICACIÓN
   --------------------------------------------------------- */

.location-modal[hidden] {
    display: none;
}

.location-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 18px;
}

.location-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 29, 39, .68);
    backdrop-filter: blur(4px);
}

.location-modal-dialog {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(560px, 100%);
    max-height: calc(100vh - 36px);
    padding: 29px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
    overflow-y: auto;
    text-align: center;
}

.location-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #eef2f5;
    color: #52616d;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.location-modal-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 13px;
    background: #e4f2fc;
    color: #238bc4;
    border-radius: 50%;
    font-size: 1.4rem;
}

.location-modal-eyebrow {
    margin: 0 0 5px;
    color: #238bc4;
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.location-modal-dialog h2 {
    margin: 0;
    color: #243548;
    font-size: 1.42rem;
}

.location-modal-description {
    max-width: 465px;
    margin: 10px auto 0;
    color: #687783;
    font-size: .83rem;
    line-height: 1.55;
}

.location-permissions {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #f6fafc;
    border: 1px solid #dde8ef;
    border-radius: 13px;
    text-align: left;
}

.location-permissions span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #506370;
    font-size: .78rem;
    font-weight: 700;
}

.location-permissions i {
    color: #25a765;
}

.location-report-options {
    display: grid;
    gap: 8px;
    margin-top: 17px;
    text-align: left;
}

.location-report-options label {
    color: #354454;
    font-size: .77rem;
    font-weight: 900;
}

.location-report-options select,
.location-report-options textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 13px;
    background: #ffffff;
    color: #273746;
    border: 1px solid #ccd8e0;
    border-radius: 10px;
    font: inherit;
    font-size: .82rem;
    outline: none;
}

.location-report-options select:focus,
.location-report-options textarea:focus {
    border-color: #238bc4;
    box-shadow: 0 0 0 4px rgba(35, 139, 196, .13);
}

.location-report-options textarea {
    resize: vertical;
    min-height: 88px;
}

.location-result {
    margin-top: 15px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.45;
}

.location-result-success {
    background: #e8f8ee;
    color: #176d43;
    border: 1px solid #bae6cb;
}

.location-result-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #efc0c0;
}

.location-result-info {
    background: #eaf5fc;
    color: #246d96;
    border: 1px solid #c7dfef;
}

.location-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 18px;
}

.location-modal-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 11px 15px;
    border-radius: 10px;
    font: inherit;
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
}

.location-modal-btn-primary {
    background: #238bc4;
    color: #ffffff;
    border: 0;
}

.location-modal-btn-secondary {
    background: #edf3f7;
    color: #405869;
    border: 1px solid #d6e1e8;
}

.location-modal-btn:disabled {
    cursor: wait;
    opacity: .67;
}

.location-privacy {
    display: block;
    margin-top: 14px;
    color: #8a959e;
    font-size: .68rem;
    line-height: 1.45;
}

.location-modal-open {
    overflow: hidden;
}


/* ---------------------------------------------------------
   17. RESPONSIVE - TABLET
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .public-profile-shell {
        padding: 17px 10px;
    }

    .public-profile-card,
    .public-message-card {
        border-radius: 20px;
    }

    .public-profile-header {
        padding: 25px 20px 23px;
    }

    .public-profile-logo {
        width: 205px;
    }

    .public-pet-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 26px 20px 22px;
        text-align: center;
    }

    .public-pet-photo-wrap {
        width: 175px;
        height: 175px;
    }

    .public-section,
    .public-plate-trust {
        margin-right: 18px;
        margin-left: 18px;
    }

    .public-contact-actions {
        grid-template-columns: 1fr;
    }

    .public-action-btn {
        min-height: 62px;
    }
}


/* ---------------------------------------------------------
   18. RESPONSIVE - TELÉFONOS
   --------------------------------------------------------- */

@media (max-width: 520px) {

    .public-profile-shell {
        padding: 10px 6px;
    }

    .public-profile-card,
    .public-message-card {
        border-radius: 17px;
    }

    .public-profile-header {
        min-height: 0;
        padding: 22px 15px 20px;
    }

    .public-profile-logo {
        width: 188px;
    }

    .public-lost-alert {
        align-items: flex-start;
        padding: 14px;
    }

    .public-lost-alert-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 1.08rem;
    }

    .public-lost-alert h1 {
        font-size: 20px;
    }

    .public-pet-photo-wrap {
        width: 155px;
        height: 155px;
    }

    .public-pet-title h1 {
        font-size: 33px;
    }

    .public-section {
        margin: 0 10px 18px;
        padding: 17px 15px;
    }

    .public-info-grid {
        grid-template-columns: 1fr;
    }

    .public-owner-card {
        align-items: flex-start;
    }

    .public-plate-trust {
        align-items: flex-start;
        margin: 0 10px 18px;
    }

    .public-profile-footer {
        padding: 21px 18px;
    }

    .public-profile-footer img {
        width: 158px;
    }

    .public-message-card {
        padding: 27px 18px;
    }

    .location-modal {
        padding: 9px;
    }

    .location-modal-dialog {
        max-height: calc(100vh - 18px);
        padding: 24px 17px 20px;
        border-radius: 17px;
    }

    .location-modal-actions {
        grid-template-columns: 1fr;
    }

    .location-modal-btn-primary {
        order: -1;
    }
}


/* =========================================================
   MODAL DE UBICACIÓN
   ========================================================= */

.location-modal[hidden] {
    display: none;
}

.location-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 15px;
}

.location-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18,27,39,.68);
    backdrop-filter: blur(4px);
}

.location-modal-dialog {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(510px, 100%);
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    padding: 29px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    text-align: center;
}

.location-modal-close {
    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #edf2f6;
    color: #586978;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.location-modal-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    background: #e8f4ff;
    color: #1685dc;
    border-radius: 18px;
    font-size: 1.45rem;
}

.location-modal-eyebrow {
    margin: 0 0 4px;
    color: #d36d00;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.location-modal-dialog h2 {
    margin: 0;
    color: #1e2a39;
    font-size: 1.4rem;
}

.location-modal-description {
    margin: 10px auto 0;
    color: #687583;
    font-size: .82rem;
    line-height: 1.55;
}

.location-permissions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 17px;
    padding: 14px;
    background: #edf8f2;
    border-radius: 12px;
    text-align: left;
}

.location-permissions span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #397155;
    font-size: .76rem;
    font-weight: 700;
}

.location-permissions i {
    color: #198754;
}

.location-report-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 17px;
    text-align: left;
}

.location-report-options label {
    margin-top: 4px;
    color: #374557;
    font-size: .74rem;
    font-weight: 900;
}

.location-report-options select,
.location-report-options textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    background: #fbfcfd;
    color: #263342;
    border: 1px solid #ccd7e0;
    border-radius: 9px;
    font: inherit;
    font-size: .8rem;
    outline: none;
}

.location-report-options select:focus,
.location-report-options textarea:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33,150,243,.12);
}

.location-report-options textarea {
    resize: vertical;
}

.location-result {
    margin-top: 15px;
    padding: 12px 13px;
    border-radius: 10px;
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

.location-result-info {
    background: #edf6ff;
    color: #21658f;
    border: 1px solid #cae3f5;
}

.location-result-success {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
}

.location-result-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
}

.location-modal-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 19px;
}

.location-modal-btn {
    min-height: 47px;
    padding: 11px 15px;
    border-radius: 10px;
    font: inherit;
    font-size: .8rem;
    font-weight: 900;
    cursor: pointer;
}

.location-modal-btn-primary {
    background: #2196f3;
    color: #fff;
    border: 0;
}

.location-modal-btn-primary:disabled {
    opacity: .68;
    cursor: wait;
}

.location-modal-btn-secondary {
    background: #edf3f7;
    color: #425b6f;
    border: 1px solid #d4e0e8;
}

.location-privacy {
    display: block;
    margin-top: 13px;
    color: #87929d;
    font-size: .65rem;
    line-height: 1.4;
}

.location-modal-open {
    overflow: hidden;
}


/* Responsive */

@media (max-width: 600px) {

    .public-profile-shell {
        padding: 11px 8px;
    }

    .public-profile-card,
    .public-message-card {
        border-radius: 20px;
    }

    .public-profile-header {
        padding: 22px 16px 0;
    }

    .public-pet-hero {
        padding: 23px 17px 25px;
    }

    .public-section {
        margin-right: 14px;
        margin-left: 14px;
        padding: 18px 15px;
    }

    .public-plate-trust {
        margin-right: 14px;
        margin-left: 14px;
    }

    .public-info-grid {
        grid-template-columns: 1fr;
    }

    .public-contact-actions {
        grid-template-columns: 1fr;
    }

    .public-action-location {
        grid-column: auto;
    }

    .location-modal-dialog {
        padding: 26px 17px 20px;
        border-radius: 18px;
    }
}

@media (max-width: 410px) {

    .public-lost-alert {
        flex-direction: column;
    }

    .public-pet-photo-wrap {
        width: min(215px, 70vw);
    }

    .public-owner-card {
        flex-direction: column;
    }

    .location-modal-actions {
        grid-template-columns: 1fr;
    }

    .location-modal-btn-primary {
        order: -1;
    }
}

/* =========================================================
   ELIMINAR MASCOTA Y LIBERAR PLACA - PETSKAN
   Página: delete.php
   Presenta la confirmación de eliminación, el resultado de
   la operación y los estados de error o registro no disponible.
   ========================================================= */


/* ---------------------------------------------------------
   1. FONDO GENERAL DE LA PÁGINA
   --------------------------------------------------------- */

.delete-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2e 52%,
            #ffad1e 100%
        );
    color: #1d2734;
    text-align: left;
}


/* ---------------------------------------------------------
   2. CONTENEDOR PRINCIPAL - PC Y TABLET
   --------------------------------------------------------- */

.delete-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.delete-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 700px;
    padding: 0 32px 32px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93, 69, 24, .17);
    overflow: hidden;
}


/* ---------------------------------------------------------
   3. CABECERA DE ELIMINACIÓN
   --------------------------------------------------------- */

.delete-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0 -32px;
    padding: 30px 34px 28px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    border: 0;
    text-align: center;
}

.delete-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.delete-icono {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .86);
    border-radius: 50%;
    font-size: 1.45rem;
    box-shadow: 0 7px 18px rgba(73, 49, 15, .15);
}

.delete-icono-peligro {
    color: #c63232;
}

.delete-icono-exito {
    color: #198754;
}

.delete-eyebrow {
    margin: 0 0 7px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.delete-header h1 {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
    font-weight: 800;
    line-height: 1.1;
}

.delete-subtitulo {
    max-width: 470px;
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   4. MENSAJES DEL SISTEMA
   --------------------------------------------------------- */

.delete-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.45;
}

.delete-alert i {
    margin-top: 2px;
}

.delete-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.delete-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}


/* ---------------------------------------------------------
   5. RESUMEN DE LA MASCOTA Y LA PLACA
   --------------------------------------------------------- */

.delete-summary {
    display: grid;
    gap: 11px;
    margin-top: 22px;
}

.delete-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e0e7ed;
    border-radius: 12px;
}

.delete-summary-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #687583;
    font-size: .80rem;
    font-weight: 800;
}

.delete-summary-row span i {
    color: #2196f3;
}

.delete-summary-row strong {
    color: #263444;
    font-size: .90rem;
    text-align: right;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   6. ADVERTENCIA DE ELIMINACIÓN DEFINITIVA
   --------------------------------------------------------- */

.delete-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 18px;
    background: #fff4e8;
    color: #754b1a;
    border: 1px solid #efc996;
    border-left: 5px solid #e48b2f;
    border-radius: 14px;
}

.delete-warning > i {
    margin-top: 3px;
    color: #d97706;
    font-size: 1.15rem;
}

.delete-warning > div {
    min-width: 0;
}

.delete-warning strong {
    display: block;
    color: #673d11;
    font-size: .94rem;
}

.delete-warning p {
    margin: 8px 0 0;
    font-size: .81rem;
    line-height: 1.5;
}

.delete-warning ul {
    margin: 10px 0 0;
    padding-left: 19px;
}

.delete-warning li {
    margin: 5px 0;
    font-size: .80rem;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   7. RESULTADO EXITOSO
   --------------------------------------------------------- */

.delete-success-box {
    margin-top: 22px;
    padding: 28px 22px;
    background: #eefaf3;
    border: 1px solid #bce8cf;
    border-radius: 16px;
    text-align: center;
}

.delete-success-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #dff5e8;
    color: #198754;
    border-radius: 50%;
    font-size: 1.45rem;
}

.delete-success-box h2 {
    margin: 0;
    color: #1d5f3d;
    font-size: 1.16rem;
}

.delete-success-box p {
    max-width: 500px;
    margin: 10px auto 0;
    color: #52705f;
    font-size: .83rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   8. REGISTRO NO DISPONIBLE
   --------------------------------------------------------- */

.delete-empty {
    margin-top: 22px;
    padding: 30px 22px;
    background: #fff8e8;
    border: 1px dashed #dfc37a;
    border-radius: 16px;
    text-align: center;
}

.delete-empty-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    background: #fff0c5;
    color: #c78100;
    border-radius: 50%;
    font-size: 1.35rem;
}

.delete-empty h2 {
    margin: 0;
    color: #5f4a1e;
    font-size: 1.15rem;
}

.delete-empty p {
    max-width: 440px;
    margin: 9px auto 0;
    color: #74643f;
    font-size: .84rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   9. FORMULARIO
   --------------------------------------------------------- */

.delete-form {
    margin: 0;
}


/* ---------------------------------------------------------
   10. BOTONES Y ACCIONES
   --------------------------------------------------------- */

.delete-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 22px;
}

.delete-success-box + .delete-actions,
.delete-empty + .delete-actions {
    grid-template-columns: minmax(0, 1fr);
}

.delete-btn,
.delete-btn:link,
.delete-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        opacity .18s ease;
}

.delete-btn:hover {
    transform: translateY(-2px);
}

.delete-btn-primary {
    border: 0;
    background: #2196f3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .28);
}

.delete-btn-primary:hover {
    background: #1686dc;
    box-shadow: 0 11px 24px rgba(33, 150, 243, .34);
}

.delete-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.delete-btn-secondary:hover {
    background: #e1ebf2;
}

.delete-btn-danger {
    border: 0;
    background: #d94a4a;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(217, 74, 74, .24);
}

.delete-btn-danger:hover {
    background: #c73939;
    box-shadow: 0 11px 24px rgba(217, 74, 74, .31);
}

.delete-btn:disabled {
    cursor: wait;
    opacity: .72;
    transform: none;
    box-shadow: none;
}


/* ---------------------------------------------------------
   11. RESPONSIVE - TABLET Y MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .delete-shell {
        padding: 16px 10px;
    }

    .delete-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .delete-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
    }

    .delete-logo {
        width: 205px;
    }

    .delete-header h1 {
        font-size: clamp(27px, 8vw, 34px);
    }

    .delete-actions {
        grid-template-columns: 1fr;
    }

    .delete-btn-danger,
    .delete-btn-primary {
        order: -1;
    }
}


/* ---------------------------------------------------------
   12. RESPONSIVE - TELÉFONOS PEQUEÑOS
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .delete-header {
        padding: 22px 16px;
    }

    .delete-logo {
        width: 185px;
    }

    .delete-header h1 {
        font-size: 27px;
    }

    .delete-subtitulo {
        font-size: 13px;
    }

    .delete-summary-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .delete-summary-row strong {
        text-align: left;
    }

    .delete-warning {
        padding: 15px;
    }

    .delete-success-box,
    .delete-empty {
        padding: 25px 17px;
    }
}


/* =========================================================
   PETSKAN - ESTRUCTURA GENERAL DE PÁGINAS
   ========================================================= */

.petskan-page-body {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,.34),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #ffdc43 0%,
            #ffca2d 52%,
            #ffad1d 100%
        );

    color: #1d2734;
}

.petskan-page-shell {
    box-sizing: border-box;

    display: flex;
    justify-content: center;

    width: 100%;
    min-height: 100vh;

    padding: 28px 16px;
}

.petskan-page-card {
    width: 40%;
    padding: 0;

    background: #ffffff;
    border-radius: 24px;

    overflow: hidden;
}

.petskan-page-content {
    padding: 24px 32px 32px;
}

.petskan-page-alert {
    margin: 24px 32px 0;
}

@media (max-width: 1000px) {

    .petskan-page-card {
        width: 70%;
    }
}

@media (max-width: 700px) {

    .petskan-page-shell {
        padding: 16px 10px;
    }

    .petskan-page-card {
        width: 100%;
        border-radius: 20px;
    }

    .petskan-page-content {
        padding: 20px 16px 24px;
    }

    .petskan-page-alert {
        margin: 18px 16px 0;
    }

    .petskan-header {
        min-height: auto;
    }
}

/* =========================================================
   GENERADOR DE ETIQUETAS QR - PETSKAN
   Página: admin_generar_etiquetas_qr.php
   ========================================================= */

/* 1. FONDO GENERAL */
.qr-generator-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(135deg, #ffdc43 0%, #ffca2e 52%, #ffad1e 100%);
    color: #1d2734;
    text-align: left;
}

/* 2. CONTENEDOR PRINCIPAL */
.qr-generator-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    padding: 28px 16px;
}

.qr-generator-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 700px;
    padding: 0 32px 32px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(93,69,24,.17);
    overflow: hidden;
}

/* 3. CABECERA NARANJA */
.qr-generator-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 -32px;
    padding: 30px 34px 28px;
    background: linear-gradient(145deg, #ffae2e, #ff9f1c);
    text-align: center;
}

.qr-generator-logo {
    width: 215px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.qr-generator-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.86);
    color: #17679d;
    border-radius: 50%;
    font-size: 1.35rem;
}

.qr-generator-eyebrow {
    margin: 0 0 7px;
    color: #975900;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.qr-generator-header h1 {
    margin: 0;
    color: #10213d;
    font-size: clamp(28px, 4vw, 37px);
}

.qr-generator-subtitle {
    margin: 11px auto 0;
    color: #654000;
    font-size: 14px;
}

/* 4. MENSAJES */
.qr-generator-alert {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 700;
}

.qr-generator-alert-exito {
    background: #e9f9f0;
    color: #176d43;
    border: 1px solid #bce9d0;
    border-left: 5px solid #25a765;
}

.qr-generator-alert-error {
    background: #fff0f0;
    color: #a72e2e;
    border: 1px solid #f4c5c5;
    border-left: 5px solid #d64242;
}

/* 5. ESPECIFICACIONES */
.qr-generator-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.qr-generator-specs > div {
    padding: 13px 10px;
    background: #f7fafc;
    border: 1px solid #dfe7ed;
    border-radius: 12px;
    text-align: center;
}

.qr-generator-specs span,
.qr-generator-specs strong {
    display: block;
}

.qr-generator-specs span {
    color: #7a8791;
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.qr-generator-specs strong {
    margin-top: 5px;
    color: #2d4051;
    font-size: .84rem;
}

/* 6. FORMULARIO */
.qr-generator-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.qr-generator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.qr-generator-field {
    display: grid;
    gap: 8px;
}

.qr-generator-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #324150;
    font-size: .82rem;
    font-weight: 900;
}

.qr-generator-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #ccd7df;
    border-radius: 11px;
    font: inherit;
    outline: none;
}

.qr-generator-field input:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33,150,243,.14);
}

/* 7. AVISO DE IMPRESIÓN */
.qr-generator-notice {
    display: flex;
    gap: 10px;
    padding: 14px 15px;
    background: #fff7df;
    color: #805e0c;
    border: 1px solid #ecd88a;
    border-radius: 12px;
    font-size: .79rem;
}

.qr-generator-notice p {
    margin: 0;
}

/* 8. RESULTADO */
.qr-generator-result {
    margin-top: 22px;
    padding: 26px 20px;
    background: #eefaf3;
    border: 1px solid #bce8cf;
    border-radius: 16px;
    text-align: center;
}

.qr-generator-result-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 13px;
    background: #dff5e8;
    color: #198754;
    border-radius: 50%;
    font-size: 1.4rem;
}

/* 9. BOTONES */
.qr-generator-btn,
.qr-generator-btn:link,
.qr-generator-btn:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border-radius: 11px;
    font: inherit;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.qr-generator-btn-primary {
    border: 0;
    background: #2196f3;
    color: #fff;
}

.qr-generator-btn-download {
    max-width: 330px;
    background: #25a765;
    color: #fff;
    border: 0;
}

.qr-generator-btn-secondary {
    background: #edf3f8;
    color: #36536b;
    border: 1px solid #d3e0e9;
}

.qr-generator-actions {
    margin-top: 18px;
}

/* 10. RESPONSIVE */
@media (max-width: 700px) {
    .qr-generator-shell {
        padding: 16px 10px;
    }

    .qr-generator-card {
        padding: 0 16px 24px;
        border-radius: 20px;
    }

    .qr-generator-header {
        margin: 0 -16px;
        padding: 25px 20px 24px;
    }

    .qr-generator-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .qr-generator-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PERFIL PÚBLICO - HOMENAJE
========================================================= */

/*
|--------------------------------------------------------------------------
| Cabecera y logotipo
|--------------------------------------------------------------------------
*/

.public-profile-body-memorial .public-profile-header {
    padding: 18px 18px 22px;
}

.public-profile-body-memorial .public-profile-logo {
    display: block;
    width: min(210px, 70%);
    height: auto;
    margin: 0 auto 18px;
}


/*
|--------------------------------------------------------------------------
| Tarjeta de homenaje
|--------------------------------------------------------------------------
*/

.public-profile-body-memorial .public-memorial-alert {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 14px;

    width: 100%;
    margin: 0;
    padding: 18px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(137, 93, 171, 0.20);
    border-radius: 20px;

    box-shadow:
        0 8px 0 rgba(95, 61, 124, 0.30),
        0 14px 24px rgba(68, 40, 89, 0.15);
}


/*
|--------------------------------------------------------------------------
| Icono
|--------------------------------------------------------------------------
*/

.public-profile-body-memorial .public-memorial-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin: 0;

    color: #8655a5;
    background: #f1e6f8;
    border-radius: 50%;

    font-size: 22px;
    line-height: 1;

    flex-shrink: 0;
}

.public-profile-body-memorial .public-memorial-alert-icon i {
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Texto
|--------------------------------------------------------------------------
*/

.public-profile-body-memorial .public-memorial-alert-content {
    min-width: 0;
}

.public-profile-body-memorial .public-memorial-alert-eyebrow {
    margin: 0 0 5px;

    color: #70438c;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-profile-body-memorial .public-memorial-alert h1 {
    margin: 0;

    color: #55336a;
    font-size: clamp(1.28rem, 5.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
}

.public-profile-body-memorial .public-memorial-alert-message {
    display: block;

    margin-top: 10px;

    color: #625a68;
    font-size: clamp(0.96rem, 3.8vw, 1.08rem);
    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Separación y fotografía
|--------------------------------------------------------------------------
*/

.public-profile-body-memorial .public-profile-header
    + .public-pet-hero {
    margin-top: 18px;
}

.public-profile-body-memorial .public-pet-hero {
    padding-top: 24px;
}

.public-profile-body-memorial .public-pet-photo-wrap {
    position: relative;

    width: min(76vw, 330px);
    aspect-ratio: 1 / 1;
    height: auto;

    margin: 0 auto;

    overflow: hidden;
    border: 7px solid #ffffff;
    border-radius: 50%;

    outline: 5px solid rgba(134, 85, 165, 0.22);

    box-shadow:
        0 14px 30px rgba(72, 47, 87, 0.18);
}

.public-profile-body-memorial .public-pet-photo {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}


/*
|--------------------------------------------------------------------------
| Nombre y estado
|--------------------------------------------------------------------------
*/

.public-profile-body-memorial .public-pet-title {
    margin-top: 24px;
    text-align: center;
}

.public-profile-body-memorial .public-pet-title h1 {
    margin: 0 0 15px;

    color: #35203f;
    font-size: clamp(2.4rem, 11vw, 3.8rem);
    line-height: 1;
}

.public-profile-body-memorial .public-pet-title small {
    display: block;

    margin-top: 14px;

    color: #79717d;
    font-size: 1rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Celulares estrechos
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .public-profile-body-memorial .public-profile-header {
        padding: 16px 14px 20px;
    }

    .public-profile-body-memorial .public-profile-logo {
        width: min(190px, 66%);
        margin-bottom: 15px;
    }

    .public-profile-body-memorial .public-memorial-alert {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;

        padding: 15px;
        border-radius: 18px;
    }

    .public-profile-body-memorial .public-memorial-alert-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .public-profile-body-memorial .public-memorial-alert h1 {
        font-size: 1.32rem;
    }

    .public-profile-body-memorial .public-memorial-alert-message {
        margin-top: 8px;
        font-size: 0.96rem;
    }

    .public-profile-body-memorial .public-pet-hero {
        padding-top: 22px;
    }

    .public-profile-body-memorial .public-pet-photo-wrap {
        width: min(74vw, 285px);
        border-width: 6px;
        outline-width: 4px;
    }
}

/* =========================================================
   PERFIL PÚBLICO - REGISTRADO
========================================================= */

/*
|--------------------------------------------------------------------------
| Cabecera y logotipo
|--------------------------------------------------------------------------
*/

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-profile-header {
    padding: 18px 18px 22px;
}

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-profile-logo {
    display: block;
    width: min(210px, 70%);
    height: auto;
    margin: 0 auto 18px;
}


/*
|--------------------------------------------------------------------------
| Tarjeta de identificación
|--------------------------------------------------------------------------
*/

.public-registered-alert {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 14px;

    width: 100%;
    margin: 0;
    padding: 18px;

    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(35, 135, 103, 0.18);
    border-radius: 20px;

    box-shadow:
        0 8px 0 rgba(29, 108, 84, 0.28),
        0 14px 24px rgba(25, 78, 62, 0.14);
}


/*
|--------------------------------------------------------------------------
| Icono
|--------------------------------------------------------------------------
*/

.public-registered-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin: 0;

    color: #168b68;
    background: #def5ec;
    border-radius: 50%;

    font-size: 22px;
    line-height: 1;

    flex-shrink: 0;
}

.public-registered-alert-icon i {
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Texto
|--------------------------------------------------------------------------
*/

.public-registered-alert-content {
    min-width: 0;
}

.public-registered-alert-eyebrow {
    margin: 0 0 5px;

    color: #147455;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-registered-alert h1 {
    margin: 0;

    color: #155e49;
    font-size: clamp(1.28rem, 5.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
}

.public-registered-alert-message {
    display: block;

    margin-top: 10px;

    color: #56645f;
    font-size: clamp(0.96rem, 3.8vw, 1.08rem);
    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Separación y fotografía
|--------------------------------------------------------------------------
*/

.public-profile-header + .public-pet-hero {
    margin-top: 18px;
}

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-pet-hero {
    padding-top: 24px;
}

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-pet-photo-wrap {
    position: relative;

    width: min(76vw, 330px);
    aspect-ratio: 1 / 1;
    height: auto;

    margin: 0 auto;

    overflow: hidden;
    border: 7px solid #ffffff;
    border-radius: 50%;

    outline: 5px solid rgba(30, 151, 112, 0.20);

    box-shadow:
        0 14px 30px rgba(39, 91, 74, 0.16);
}

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-pet-photo {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}


/*
|--------------------------------------------------------------------------
| Nombre y placa
|--------------------------------------------------------------------------
*/

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-pet-title {
    margin-top: 24px;
    text-align: center;
}

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-pet-title h1 {
    margin: 0 0 15px;

    color: #10243d;
    font-size: clamp(2.4rem, 11vw, 3.8rem);
    line-height: 1;
}

.public-profile-body:not(.public-profile-body-lost):not(
    .public-profile-body-memorial
) .public-pet-title small {
    display: block;

    margin-top: 14px;

    color: #747e89;
    font-size: 1rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Celulares estrechos
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .public-profile-body:not(.public-profile-body-lost):not(
        .public-profile-body-memorial
    ) .public-profile-header {
        padding: 16px 14px 20px;
    }

    .public-profile-body:not(.public-profile-body-lost):not(
        .public-profile-body-memorial
    ) .public-profile-logo {
        width: min(190px, 66%);
        margin-bottom: 15px;
    }

    .public-registered-alert {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;

        padding: 15px;
        border-radius: 18px;
    }

    .public-registered-alert-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .public-registered-alert h1 {
        font-size: 1.32rem;
    }

    .public-registered-alert-message {
        margin-top: 8px;
        font-size: 0.96rem;
    }

    .public-profile-body:not(.public-profile-body-lost):not(
        .public-profile-body-memorial
    ) .public-pet-hero {
        padding-top: 22px;
    }

    .public-profile-body:not(.public-profile-body-lost):not(
        .public-profile-body-memorial
    ) .public-pet-photo-wrap {
        width: min(74vw, 285px);
        border-width: 6px;
        outline-width: 4px;
    }
}